作者:賴志文
JW Media Player是一個開源的在網(wǎng)頁上使用的Flash視頻、音頻以及圖片播放器,支持 Sliverlight播放,可以通過一個XML文件使播放器自動切換顯示一組圖片,并播放背景音樂。大家可以通過其官方網(wǎng)站獲取最新的源碼
http://www.longtailvideo.com。
JW Player的使用配置很簡單,以下是JW Player的一個簡單的使用例子(我這里使用6.1版本):
引入必要文件:
6.1/jwplayer.js
標(biāo)識一個div容器
<center><div id="myElement">Loading the player...</div></center><script type="text/javascript"> jwplayer("myElement").setup({ file: "example.mp4", height:360, image: "example.jpg",//初始時的視頻封面 width: 640 });</script>
這個例子是播放mp4,當(dāng)我們把視頻文件換成wmv的時候就不能播放了,而官方網(wǎng)站沒有介紹如何使JW Player支持播放wmv。經(jīng)過多方資料的搜集,有了如下解決方案。
要使支持wmv的播放,必須有以下文件:
silverlight.js
wmvplayer.js
wmvplayer.xaml
文件下載地址:
http://www.dond-wp.com/silverlightplayer.html,現(xiàn)在打不開了,可能跟墻有關(guān)。
頁面中需要引入如下js文件:
6.1/jwplayer.js
silverlight.js
wmvplayer.js
配置播放方式如下:
var elm = document.getElementById("myElement"); var src = 'wmvplayer.xaml'; var cfg = { file: 'myVideo.wmv', image: 'preview.jpg', //封面 logo: 'ruanko_logo.png', link: 'http://www.ruanko.com/main', //logo的鏈接 linktarget: '_blank', //新頁面打開鏈接 width: '500', height: '340', autostart: 'true', start:'10', //從第10秒開始播放 backcolor: '000000', //背景顏色 frontcolor: 'FFFFFF' //字體顏色 };var ply = new jeroenwijering.Player(elm,src,cfg);
效果如下圖所示:
如何獲取wmv視頻的播放時間呢?以下做個介紹。
解讀wmvplayer.js,發(fā)現(xiàn)里面有一個方法timeChanged(),每一秒鐘都會執(zhí)行一次,這里記錄著時間的更替,也就是說,我們只要在這里面獲得它所記錄到的時間并返回就可以了。
下面對wmvplayer.js進行二次編程修改:
1、在jeroenwijering.Player的this.configuration中加入配置:
position: '0', //二次編程加入:已播放時間
2、在jeroenwijering.Model.prototype的goStop: function()中加入
this.intoff = true;
3、修改timeChanged: function()方法,以下為修改后的方法:
timeChanged: function() { //二次編程修改 try{ var pos = Math.round(this.video.Position.Seconds*10)/10; this.view.onTime(pos,this.configuration['duration']); //二次編程加入:賦值已播放時間,格式化為 h:m:s var runT = Math.floor(pos); var minutes = Math.floor(runT/60); //獲取分鐘總數(shù) var seconds = runT - minutes*60; //獲取秒 var hour = Math.floor(minutes/60); //獲取小時數(shù) minutes = minutes%60; //獲取分鐘 this.configuration['position'] = hour + ":" + minutes + ":" + seconds ; }catch(err){ return; } }
獲取播放時間:
var playtime = ply .getConfig().position; //ply是播放器對象,position是上面添加的配置