JW Player for Silverlight

由於要播放 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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *