最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 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. 使用oracle11g_instant_client来解决在不安装oracle客户端的情况下连接服务端

    一.下载instantclient_11_2,可去oracle官网进行下载. 二.解压缩下载的instantclient_11_2,将instantclient_11_2目录拖放到C:\Program ...

  2. 将类似 12.56MB 36.89KB 转成 以K为单位的数字【备忘】

    select case RIGHT(RESOURCE_SIZE,2) when 'MB' THEN SUBSTRING_INDEX(RESOURCE_SIZE,'MB',1)*1024 ELSE SU ...

  3. ACM: HDU 1028 Working out 解题报告-DP

    Working out time limit per test  2 seconds memory limit per test  256 megabytes input  standard inpu ...

  4. CDOJ 1437 谭松松的旅游计划 Label:倍增LCA && 最短路

    谭松松的旅游计划 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...

  5. APP测试流程

    1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前先向 ...

  6. 【noiOJ】p8206

    02:二分法求函数的零点 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 有函数: f(x) = x5 - 15 * x4+ 85 * x3- 225 * x ...

  7. db2日常维护

    一. DB2日常维护操作 1.数据库的启动.停止.激活 db2 list active databases db2 active db 数据库名 db2start --启动 db2stop [forc ...

  8. 使用C#将HTML文本转换为普通文本,去掉所有的Html标记(转)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; //首先需要导入命名空间 u ...

  9. Linux多线程实例练习 - pthread_exit() 与 pthread_join()

    Linux多线程实例练习 - pthread_exit 与 pthread_join pthread_exit():终止当前线程 void pthread_exit(void* retval); pt ...

  10. XML 参考:XML基础 XML 简介

    XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...