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

    先把所有数减去最小值,防止负数出现问题. $d=0$,直接$O(n)$扫过去即可. $d\neq 0$,首先通过双指针求出每个数作为右端点时往左可以延伸到哪里,中间任意两个数差值都是$d$的倍数且不重 ...

  2. ACM 背包问题

    背包问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在有很多物品(它们是可以分割的),我们知道它们每个物品的单位重量的价值v和重量w(1<=v,w< ...

  3. JSP -- for循环按钮处理事件

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. reason: '*** Collection <__NSCFArray: 0x7ffa43528f70> was mutated while being enumerated.'

    一,错误分析 1.崩溃代码如下: //遍历当前数组,判断是否有相同的元素 for (NSString *str in self.searchHistoryArrM) { if ([str isEqua ...

  5. （转） 使用Speech SDK 5.1文字转音频

    下载地址: http://www.microsoft.com/en-us/download/details.aspx?id=10121 SeppchSDK51.exe 语音合成引擎 SpeechSDK ...

  6. 复制 VS 复用 -04

    (续上篇)         小菜:“我明白了,他说用任意一种面向对象语言实现,那意思就是要用面向对象的编程方法去实现,对吗?OK,这个我学过,只不过当时我没想到而已.” 大鸟:“所有编程初学者都会有这 ...

  7. Java生成CSV文件实例详解

    本文实例主要讲述了Java生成CSV文件的方法,具体实现步骤如下: 1.新建CSVUtils.java文件: package com.saicfc.pmpf.internal.manage.utils ...

  8. 李洪强iOS经典面试题134-C语言

    可能碰到的iOS笔试面试题(4)--C语言   C语言,开发的基础功底,iOS很多高级应用都要和C语言打交道,所以,C语言在iOS开发中的重要性,你懂的.里面的一些问题可能并不是C语言问题,但是属于计 ...

  9. Android常用功能代码块

    1.设置activity无标题,全屏 // 设置为无标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); // 设置为全屏模式 getWindow(). ...

  10. MyBatis增删改查

    MyBatis的简介: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名 ...