網頁媒體播放利器 - JW Player使用心得

前段時間在做一個網站項目，要求能在線播放視頻、音樂，這個以前還真沒接觸過。恰好今天在罈子裏閒逛時，發現有同志對這方面也感興趣，遂把這些整理了下，同時自己也可以複習下。

播放器需要滿足以下需求：

1. 支持所有主流瀏覽器

2. 能與播放器交互，播放器必須提供必要的API

3. 可定製外觀，方便後期擴展

4. 支持flv、mp3、mp4格式，支持播放列表

5. 詳盡的幫助文檔說明，方便開發者使用

需求就是一切，咱沒條件只好硬着頭皮創建條件強上了～～～。於是瘋狂百度Google，發現了很多第三方播放器。由於咱E文實在不咋地，一開始想找個國內的。可是，找來找去，發現都是要收費的。於是只好走上不愛國之路，只能找一個國外的了。在搜索中，綜合前輩們的意見，最終選擇了JW Player。搜索國外資源還是Google給力啊，不管你信不信，反正我是信了：）。

JW Player是一款非常優秀的網頁媒體播放器，支持H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )視頻格式，MP3 ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音頻，同時也支持swf和圖片( gif 、jpg、png)和YouTube格式視頻。

支持HTML5，有着非常豐富的插件可用（部分是收費的，如廣告插件）。

JW Player的最新版是5.7，官方網址：http://www.longtailvideo.com/players/jw-flv-player/?search=Playlist

 

廢話到此爲止，現在開始主題。令人振奮的是，JW Player使用起來非常方便，下面就探討一下JW Player的基本用法。

第一步 從官網下載最新的播放器

以上兩個選項不選，Viral是JW Player的一個插件，做視頻分享用的，需不需要自己看着辦。輸入郵箱即可下載。

下載完成後，解壓出來有8個文件，如下圖：

jwplayer.js和player.swf是核心文件，必須引入這兩個文件。

JW Player Quick Start Guide.pdf是幫助文檔，裏面講的也比較詳細了。

第二步 體驗JW Player（基本用法）

1. 在頁面head區域引用必要的js文件（本人習慣用jQuery，故引入了，使用其它框架的自行更改該部分）

<script src="js/jquery/jquery-1.6.2.js" type="text/javascript"></script>
<script src="js/plugins/mediaplayer-5.7/jwplayer.js" type="text/javascript"></script>

 2. html結構如下

<div id="container"></div>
<input type="button" class="player-play" value="播放" />
<input type="button" class="player-stop" value="停止" />
<input type="button" class="player-status" value="取得狀態" />
<input type="button" class="player-current" value="當前播放秒數" />
<input type="button" class="player-goto" value="轉到第30秒播放" />
<input type="button" class="player-length" value="視頻時長(秒)" />

 

3. 初始化播放器，完成控制邏輯

<script type="text/javascript">
    var thePlayer;  //保存當前播放器以便操作
    $(function() {
        thePlayer = jwplayer('container').setup({
            flashplayer: 'js/plugins/mediaplayer-5.7/player.swf',
            file: 'js/plugins/mediaplayer-5.7/video.mp4',
            width: 500,
            height: 350,
            dock: false
        });

        //播放 暫停
        $('.player-play').click(function() {
            if (thePlayer.getState() != 'PLAYING') {
                thePlayer.play(true);
                this.value = '暫停';
            } else {
                thePlayer.play(false);
                this.value = '播放';
            }
        });

        //停止
        $('.player-stop').click(function() { thePlayer.stop(); });

        //獲取狀態
        $('.player-status').click(function() {
            var state = thePlayer.getState();
            var msg;
            switch (state) {
                case 'BUFFERING':
                    msg = '加載中';
                    break;
                case 'PLAYING':
                    msg = '正在播放';
                    break;
                case 'PAUSED':
                    msg = '暫停';
                    break;
                case 'IDLE':
                    msg = '停止';
                    break;
            }
            alert(msg);
        });

        //獲取播放進度
        $('.player-current').click(function() { alert(thePlayer.getPosition()); });

        //跳轉到指定位置播放
        $('.player-goto').click(function() {
            if (thePlayer.getState() != 'PLAYING') {    //若當前未播放，先啓動播放器
                thePlayer.play();
            }
            thePlayer.seek(30); //從指定位置開始播放(單位：秒)
        });

        //獲取視頻長度
        $('.player-length').click(function() { alert(thePlayer.getDuration()); });
    });
</script>

到此完成，接下來運行網頁就可以看到效果了。以下是一個截圖：

 

關於更詳細的配置和說明文檔，請參閱官方文檔，說明非常詳盡。

官方文檔：http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5

 

首次發文，定有許多不足之處，懇請大家批評指正，沒有交流就沒有進步