最近工作中用到视频播放，在网上搜索对比了好几款开源播放插件后，觉得 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. BZOJ2990 : [Ontak2010]Keyboard

    考虑从$(1,1)$开始搜索移动方案,每次移动坐标的变化量都是$2$. 如果构成了环,那么环的周长肯定是偶数. 考虑这个环一定要被若干个骨牌覆盖,且还有一个位置是空的. 所以得出环的周长是奇数,矛盾, ...

  2. JDBC连接各种数据库的字符串，就是不好记

    JDBC连接各种数据库的字符串大同小异,在此总结一下,备忘. oracle    driverClass:oracle.jdbc.driver.OracleDriver    url:jdbc:ora ...

  3. iOS 获取UIView 动画的实时位置的方法

    [self.animationView.layer.presentationLayer frame].origin.x

  4. C#_简单实用的翻页

    简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...

  5. asp.net mvc本地程序集和GAC的程序集冲突解决方法

    一个从asp.net mvc 3升级到asp.net mvc 4的项目发生了如下错误: [A]System.Web.WebPages.Razor.Configuration.HostSection c ...

  6. Node.Js —— PM2介绍

    pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的.它非常适合IaaS结构,但不要把它用于 ...

  7. 这世上倒底有没有神仙——说“Excel不是数据库，是不是犯了白马非马论的错误？？

    这问题是这样引出来的: 我上计算机应用基础课,讲到Excel,因为一直以来,很多新生对Word中的表格和Excel中的表格总是分不清,甚至有老师也问过我,Excel中的表格和Word中的表格有什么区别 ...

  8. #define is unsafe——I

    I. #define is unsafe Have you used #define in C/C++ code like the code below? #include <stdio.h&g ...

  9. 【BUG】wego购物分享系统未登陆分享宝贝时查看宝贝自动新增产品数据

    1.登录微购http://demo.wego360.com/站. 2.分享宝贝功能检索第三方平台商品数据. 1.登录微购http://demo.wego360.com/站. 2.分享宝贝功能检索第三方 ...

  10. [转]CPU的位数与操作系统的位数的区别

    转自:http://weiheyouchou.blog.hexun.com/35564976_d.html 随着近来AMD和Intel的64位CPU以及 Microsoft 64位操作系统的相继发布, ...