最近工作中用到视频播放，在网上搜索对比了好几款开源播放插件后，觉得 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. SQL: See the TSQL underneath the sp_execute calls

    When use SQL Server Profiler, on the Events Selection tab, check Show all events; Find the Store Pro ...

  2. [知识点]网络流之Edmond-Karp算法

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

  3. 转：JavaScript中的this陷阱的最全收集

    在其他地方看到的,觉得解释的狠详细,特此分享 当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概念,可能真解释不清 ...

  4. [Cocos2D-x For WP8]Tile Map创建地图

    在Cocos2D-x里面创建Tile Map地图是需要用到.tmx的地图文件的,那么创建Tile Map地图文件,我们可以通过地图编辑器来创建,地图编辑器可以在网站:http://www.mapedi ...

  5. Android -- shape 定义控件的属性

    <shape> <!-- 实心 --> <solid android:color="#ff9d77"/> <!-- 渐变 --> & ...

  6. BZOJ4554: [Tjoi2016&Heoi2016]游戏

    Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若干个炸弹,看 是否能炸到对手,或者躲开对手的炸弹.在玩游戏的过程中,小H想到了这样一 ...

  7. 教你如何利用分布式的思想处理集群的参数配置信息——spring的configurer妙用

    引言 最近LZ的技术博文数量直线下降,实在是非常抱歉,之前LZ曾信誓旦旦的说一定要把<深入理解计算机系统>写完,现在看来,LZ似乎是在打自己脸了.尽管LZ内心一直没放弃,但从现状来看,需要 ...

  8. 升级OS X EI Capition 版本导致cocoapods 使用终端上pod: command not found

    1)安装过cocoapods, 那么输入 : sudo gem install -n /usr/local/bin cocoapods 当然 上个步骤解决了我的 难题 2)首先在终端输入 gem so ...

  9. ios8 tableView设置滑动删除时 显示多个按钮

      ** *  tableView:editActionsForRowAtIndexPath:     //设置滑动删除时显示多个按钮 *  UITableViewRowAction          ...

  10. UIView常见属性总结

    一 UIVIew 常见属性 .frame 位置和尺寸(以父控件的左上角为原点(,)) .center 中点 (以父控件的左上角为原点(,)) .bounds 位置和尺寸(以自己的左上角为原点 (,)) ...