跨平台视频播放器——jplayer初尝试

项目需要展示一个企业宣传片，遂去网上寻找一些能提供适应html5和非html5的视频播放器框架，找了一天下了好多js视频播放器框架，对比了好多demo发现了一个相对不错的框架“jplayer”，它是基于jQuery的，刚好jquery稍微熟一点，所以果断决定使用他了。

非常可喜的是，这个开源框架有一个中文学习网站，并且提供中文的API，这里附上网址： jPlayer中文网

在网站上可以寻找到jPlayer最新版本的下载地址，一些示例，以及中文API，我这里就不提供下载地址了~

要使用jPlayer我们需要引入这几个文件，就像这样：

第一个文件是css文件，第二个是jquery库，第三个是jPlayer的js库

然后准备html容器，就像这样：

 
 
<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-full-screen" role="button" tabindex="0">full screen</button>
</div>
</div>
</div>
</div>
</div>
</div>

然后开始初始化jPlayer，就像这样：

 
 
<script type="text/javascript">
var isPlaying = false;
$(document).ready(function(){
 
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "<%=request.getContextPath()%>/html/front/trailerPortlet/yuanshonShow.mp4",
poster: "<%=request.getContextPath()%>/html/front/trailerPortlet/jplayer/demo.png"
});
},
swfPath: "<%=request.getContextPath()%>/html/front/trailerPortlet/jplayer/js/jquery.jplayer.swf",
supplied: "m4v",
size: {
width: "368px",
height: "182px",
cssClass: "jp-video-360p"
},
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true,
restored:{
restored:true
}
});
$("#jquery_jplayer_1").bind($.jPlayer.event.click, function(event) { // Add a listener to report the time play began
if(isPlaying){
$("#jquery_jplayer_1").jPlayer( "pause");
}else{
//$("#jquery_jplayer_1").jPlayer( "play");
}
});
 
$("#jquery_jplayer_1").bind($.jPlayer.event.pause, function(event) { // Add a listener to report the time play began
isPlaying = false;
$(".jp-video-play").show();
});
 
$("#jquery_jplayer_1").bind($.jPlayer.event.ended, function(event) { // Add a listener to report the time play began
isPlaying = false;
$(".jp-video-play").show();
});
 
$("#jquery_jplayer_1").bind($.jPlayer.event.play, function(event) { // Add a listener to report the time play began
isPlaying = true;
$(".jp-video-play").hide();
});
 
});
</script>

然后就完了，具体可以参照jPlayer中文网

jPlayer框架在支持html5的浏览器上会使用html5标签来播放视频，在不不支持html5的浏览器上会使用swf来播放视频，所以这里有一个需要注意的地方就是swfPath这个参数必须要写对，即jquery.jplayer.swf这个文件的地址，不然IE8以下是不会播放的哦。

下面是我的播放器的效果~~

---

上面的例子大家注意到使用了jPlayer的一些事件相关的API，是因为我的项目需求。

jPlayer初始的时候视频中间有一个按钮，点击播放之后这个按钮就被隐藏了，我需要一旦视频暂停的时候这个按钮又要出现，所以需要监听jPlayer的暂停事件和播放事件，控制这个按钮是否出现

还有一个需求就是点击屏幕需要能够控制暂停和播放，所以我监听了jPlayer的点击事件，然后判读当前视屏是否在播放，播放的时候暂停视屏，暂停的时候播放视频，这里问题又来了，我翻遍了jPlayer中文网上的API没找到一个方法来获取当前视频播放状态，所以我定义了一个全局变量isPlaying,在监听到播放事件和暂停事件的同时来改变改变量的状态，这样我就能够通过该变量来改变播放或者暂停了，这个土方法貌似还管用，有知道更容易实现的同学可以告诉我一声哈。

顺带说一下，你完全可以通过覆盖他原来的样式控制你自己的播放器的样式，当然他的API也提供自定义选择器名称，懒得话可以直接覆盖他的样式^_^

魔狱典狱长 » 跨平台视频播放器——jplayer初尝试