由於要播放 WMV 或是 Windows Media Service 的影音串流, 使用原來的 embedded windows media player 的方式, 比較難跨不同瀏覽器及作業系統, 自從 silverlight 出來之後, 方便的跨瀏覽器和作業系統的特性, 方便讓原來使用Windows Media 格式的影音及串流在不同瀏覽器及作業系統間可以播放.
接下來看看這個很方便的影音播放器, JW Player, http://www.longtailvideo.com/players/, 最早期他是提供了 Flash Player 供應用, 後來有了 Silverlight 及 HTML5 支援影音後, 也陸續推出了 Silverlight 及 HTML5 的播放器.
我們今天要看的是 JW Player for Silverlight 的這個播放器, 其實使用上非常簡單, 可以到這裡下載: http://www.longtailvideo.com/players/jw-wmv-player/ 下載的程式碼內容就有簡單的範例可供應用, 例如要生成一個播放器可以在網頁上播放, 只需要以下的程式碼:
<div name="mediaspace" id="mediaspace"></div>
<script type='text/javascript' src="silverlight.js"></script>
<script type='text/javascript' src="wmvplayer.js"></script>
<script type="text/javascript">
var cnt = document.getElementById("mediaspace");
var src = 'wmvplayer.xaml';
var cfg = {
file:'video.wmv',
image:'preview.jpg',
height:'240',
width:'440'
};
var ply = new jeroenwijering.Player(cnt,src,cfg);
</script>
其中幾個重要元素, div 用來放置 player 的位置, 而兩個 js 是寫好的函數庫, 下面的動態生成 player script 包含了 xaml 檔, 還有重要的起始參數, 裡面目前設定的重要 4個包含了 file 就是播放的內容 (可以是 wmv, wma 或是串流都可以), image 則是在播放前的預覽圖, height 及 width 就是高和寬了.
另外還有一個 autostart 的參數應該也偶而會用到, 就是載入後, 就自動開始播放的功能. 其他相關參數可以參考這裡: http://developer.longtailvideo.com/trac/wiki/SilverlightVars
接下來要談的就是一些操作的部分和事件的處理, 例如要播放可以利用以下指令進行播放的動作:
ply.sendEvent(‘PLAY’);
這些操作可以參考這裡的資料: http://developer.longtailvideo.com/trac/wiki/SilverlightApi 其中的 Sending events, 不過大家可能會覺得奇怪的是怎麼沒有 puase (暫停), 其實就是共用 PLAY 這個操作指令, 第一次送是播放, 再送一次就會是暫停了, 若是送 STOP 則是回到沒有播放前的狀況.
再來就是 event listener 的部分, 可以做一些事件的處理, 例如靜音時, 可以加入一個 listener 是監聽這個事件, 如下:
ply.addListener(‘MUTE’,myfunc);
不過記得在加入這個 listener 時, 要先等 player 建立完成, 否則會失敗, 使用下面的程式可以確保加入這個 listener 是沒問題的:
addListeners();
function addListeners() {
if(ply.view) {
ply.addListener('MUTE',myfunc);
//add other listener...
} else {
setTimeout(addListeners,100);
}
};
function myfunc(){
alert("mute event");
}
若有多組要加入可以一起放在裡面.
若是要加入播放完成後要出現謝謝收看的功能, 需要使用的 listener 事件是 “STATE”, 會有傳回兩個變數, 一個是之前的狀態, 一個是變成現在的狀態, 狀態共有以下幾種:
Buffering, Closed, Error, Opening, Paused, Playing, Stopped, Completed
以播放完成來看, 需要判定的是 Completed 狀態, 程式碼如下:
addListeners();
function addListeners() {
if(ply.view) {
ply.addListener('STATE', stateChange);
} else {
setTimeout(addListeners,100);
}
};
function stateChange(oldstate, newstate){
if(newstate=="Completed"){
alert("謝謝收看");
}
}
監聽了 STATE 事件, 再判斷狀態變數是 “Completed” 就可以了.
整個完整的範例可以參考這裡: http://sample.diary.tw/24/jw.htm