项目需要展示一个企业宣传片,遂去网上寻找一些能提供适应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"> </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-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也提供自定义选择器名称,懒得话可以直接覆盖他的样式^_^