最近工作中用到视频播放，在网上搜索对比了好几款开源播放插件后，觉得 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. 流式大数据处理的三种框架：Storm，Spark和Samza

    许多分布式计算系统都可以实时或接近实时地处理大数据流.本文将对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的 ...

  2. 优化特性(Attribute)性能

    通过这篇文章,不仅可以了解到Attribute的工作原理,还可以了解到GetcustomeAttribute是的内部执行流程.最后,你会看到,使用缓存机制可以极大的优化反射Attribute的性能. ...

  3. 【bzoj2809】[Apio2012]dispatching 左偏树

    2016-05-31  15:56:57 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2809 直观的思想是当领导力确定时,尽量选择薪水少的- ...

  4. 360浏览器Uncaught TypeError: object is not a function问题

    刚刚360浏览器提示 Uncaught TypeError: object is not a function,找了半天发现问题是我有一个按钮,id和方法重复了,所以提示这个. <input t ...

  5. JAVA创建并写入内容到xlsx文件

    首先需要在web项目中导入jxl.jar 包 //action中代码 public String downloadReport(){        String path = System.getPr ...

  6. MyBatis环境搭建配置文件+入门视频下载

    1.MyBatis优点 操作简单话,代码量少,效率高,成本就降低了 2.MyBatis缺点 参数只能限制为一个 selece语都要手动来写 3.与JDBC的关系:是对JDBC的扩展 把sql语句和ja ...

  7. web实验指导书和课后习题参考答案

    实验指导书 :http://course.baidu.com/view/daf55bd026fff705cc170add.html 课后习题参考答案:http://wenku.baidu.com/li ...

  8. mysql view(视图)

    一,什么是视图 视图是存放数据的一个接口,也可以说是虚拟的表.这些数据可以是从一个或几个基本表(或视图)的数据.也可以是用户自已定义的数据.其实视图里面不存放数据的,数据还是放在基本表里面,基本表里面 ...

  9. 高德地图 室内地图 API 的一些坑

    开发指南 http://lbs.amap.com/api/javascript-api/guide/create-map/indoormap/ demo 大全: http://lbs.amap.com ...

  10. 使用JSch实现SFTP文件传输

    1.JSch开发包下载 http://www.jcraft.com/jsch/ 目前最新版本为: jsch - 0.1.51 2.简单例子,列出指定目录下的文件列表 import  java.util ...