最近工作中用到视频播放，在网上搜索对比了好几款开源播放插件后，觉得 jPlayer 是比较不错的，故作此记录！

接下来先快速的展示一下 利用jPlayer播放.flv视频的效果：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <!--以下为两种不同的皮肤--->

     <!--<link href="jPlayer-2.9.2/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />-->

     <link href="jPlayer-2.9.2/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />

     <script src="Scripts/jquery-1.10.2.min.js"></script>

     <script src="jPlayer-2.9.2/dist/jplayer/jquery.jplayer.min.js"></script>

     <script type="text/javascript" src="jPlayer-2.9.2/dist/add-on/jquery.jplayer.inspector.min.js"></script>

     <script type="text/javascript">

         //<![CDATA[

         $(document).ready(

             function () {

                 $("#jquery_jplayer_1").jPlayer({

                     ready: function () {

                         $(this).jPlayer("setMedia", {

                           title: "jPlayer",

                             flv: "VideoSources/NO1410130002.flv",

                         }).jPlayer("play");  //自动播放

                     },

                     swfPath: "jPlayer-2.9.2/dist/jplayer",

                     supplied: "flv",

                     solution: "flash",

                     size: {

                         width: "640px",

                         height: "360px",

                         cssClass: "jp-video-360p"

                     },

                     useStateClassSkin: true,

                     autoBlur: false,

                     smoothPlayBar: true,

                     keyEnabled: true,

                     remainingDuration: true,

                     toggleDuration: true,

                     loop: true  //循环播放

                 })

          });

         //]]>

     </script>

 </head>

 <body>

     <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">

         <div class="jp-type-single">

             <div id="jquery_jplayer_1" class="jp-jplayer"></div>

             <div class="jp-gui">

                 <div class="jp-video-play">

                     <button class="jp-video-play-icon" role="button" tabindex="0">play</button>

                 </div>

                 <div class="jp-interface">

                     <div class="jp-progress">

                         <div class="jp-seek-bar">

                             <div class="jp-play-bar"></div>

                         </div>

                     </div>

                     <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>

                     <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>

                     <div class="jp-controls-holder">

                         <div class="jp-controls">

                             <button class="jp-play" role="button" tabindex="0">play</button>

                             <button class="jp-stop" role="button" tabindex="0">stop</button>

                         </div>

                         <div class="jp-volume-controls">

                             <button class="jp-mute" role="button" tabindex="0">mute</button>

                             <button class="jp-volume-max" role="button" tabindex="0">max volume</button>

                             <div class="jp-volume-bar">

                                 <div class="jp-volume-bar-value"></div>

                             </div>

                         </div>

                         <div class="jp-toggles">

                             <button class="jp-repeat" role="button" tabindex="0">repeat</button>

                             <button class="jp-full-screen" role="button" tabindex="0">full screen</button>

                         </div>

                     </div>

                     <div class="jp-details">

                         <div class="jp-title" aria-label="title">&nbsp;</div>

                     </div>

                 </div>

             </div>

             <div class="jp-no-solution">

                 <span>Update Required</span>

                 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.

             </div>

         </div>

     </div>

 </body>

 </html>

效果图：

写在最后：以上只是是记录了jplayer 的简单用法，如果想更多的深入，可以去官网查看相关文档：http://jplayer.org/

利用开源jPlayer播放.flv视频文件的更多相关文章

  1. vlc无法播放.flv视频文件

    解决方法:https://videoconverter.wondershare.com/vlc/flv-not-displaying-video-vlc-media-player.html. 在pre ...

  2. IIS中asp网站播放flv视频技术

    播放flv视频文件需要使用flvplayer.swf程序(32K). HTML嵌入代码: <div id="FlashFile"> <object type=&q ...

  3. MVC应用程序播放FLV视频，部分视图可多地方重复引用

    网页上播放Falsh之外,还有一种格式就是FLV的视频,也是最常见的.Insus.NET再想在MVC应用程序实现这功能. 实现这个功能,需要从网上下载一个叫vcastr22.swf.如果在网上找不到, ...

  4. OpenCV学习：播放avi视频文件

    #if 0 //播放avi视频文件(IplImage) #include <opencv2/opencv.hpp> using namespace std; #pragma comment ...

  5. PyQt+moviepy音视频剪辑实战1：多个音视频合成顺序播放或同屏播放的视频文件实现详解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

  6. 【ASP.NET 进阶】Flv视频文件在线播放示例

    最近要做个播放Flv文件的东东,网上找到一个合适的,效果如下(GIF录制软件不太好,差不多就是这样子,不过在浏览器上很流畅,具体代码可以看源代码): 源代码:FlvVideoSee.zip 问题说明: ...

  7. 如何在asp.net中如何在线播放各类视频文件

    一.后台拼字符串动态加载写法 前台调用代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. Android手机播放电脑视频文件-屌丝必备

    今天早上一到办公室,照常打开博客园看文章,看到有一片文章是用  http://www.cnblogs.com/wdfrog/p/3738180.html 看到这哥们实现的方法好复杂,又是配置电脑端,又 ...

  9. WebView&HTML5-----使用WebView播放HTML5视频文件

    一.问题描述 HTML5提供了很多新的特性比如,视频播放.web本地存储.地理定位.应用缓存.Canvas等,但这些特性需要浏览器的支持,在Android应用中我们可以使用WebView构建Web应用 ...

随机推荐

  1. BZOJ3515 : EvenPaths

    首先拓扑排序,并将障碍点按拓扑序平均分成两半. 那么一条$0$到$1$的路径一定是形如: $0$->前一半点->后一半点->第一个后一半障碍点->后一半点->$1$. 对 ...

  2. Codeforces Round #250 (Div. 2) A. The Child and Homework

    注意题目长度不能考虑前缀,而且如果即存在一个选项的长度的两倍小于其他所有选项的长度,也存在一个选项的长度大于其他选项长度的两倍,则答案不是一个好的选择,只能选择C. #include <iost ...

  3. Codeforces Round #244 (Div. 2) B. Prison Transfer

    题目是选出c个连续的囚犯,而且囚犯的级别不能大于t #include <iostream> using namespace std; int main(){ int n,t,c; cin ...

  4. ACM: HDU 2544 最短路-Dijkstra算法

    HDU 2544最短路 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descrip ...

  5. [题解+总结]NOI2015

    // 此博文为迁移而来,写于2015年7月20日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w6u7.html 1.总 ...

  6. 【hdu2795】Billboard

    Problem Description At the entrance to the university, there is a huge rectangular billboard of size ...

  7. MarkMan – 马克鳗，让设计更有爱！

    scavin(Google+) on 2010.11.16. MarkMan – 马克鳗 是一款方便高效的标注工具,极大节省设计师在设计稿上添加和修改标注的时间,让设计更有爱.Adobe AIR 平台 ...

  8. userAgent

    我们可以通过userAgent来判断,比如检测某些关键字,例如:AppleWebKit*****Mobile或AppleWebKit,需要注意的是有些浏览器的userAgent中并不包含AppleWe ...

  9. C#控制台打印简单【倒三角形】的图形

    今天想练习一下简单的打印图形,小弟没有学过什么算法,嘿嘿,以后有更好的想法继续修改... static void InvertedTrainangle() { Console.WriteLine(&q ...

  10. Java中的Bigdecimal类型运算

    Java中的Bigdecimal类型运算 双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更小的数进行运算和处理.Java在java.math包中提 供的API类BigD ...