您的位置：首页 > 其它

利用开源jPlayer播放.flv视频文件

2015-06-30 21:38 357 查看

最近工作中用到视频播放，在网上搜索对比了好几款开源播放插件后，觉得 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"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </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"> </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>

View Code
效果图：

写在最后：以上只是是记录了jplayer 的简单用法，如果想更多的深入，可以去官网查看相关文档：http://jplayer.org/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航