jPlayer插件的使用

文講一下本人在使用jPlayer插件時的整個過程、出現的BUG已經解決辦法。

       最近在做bootstrap項目，項目中需要一個響應式、兼容IE7的視頻播放插件，經過上網查找，找到了所謂可以兼容到IE6的響應式視頻播放插件——jPlayer。注：本代碼的功能是打開自動循環播放，如果不需要，可以修改個別屬性。

一、下載插件包。

官網下載插件包：點擊打開鏈接，這種網站當然有中文版：點擊打開鏈接 （PS：感覺網站布局有點丑，像高仿網站。但仍擋不住我對它愛的深沉），就現在來看，中文網的版本更新慢於英文網站。打開官網，首頁就有一個大大的Download按鈕，也可以點擊菜單欄里的Download選項進行下載。

 

二、在html中使用。

下載的插件包中有很多文件，官網給的比較全，還有各種例子，在example文件夾中，你可以看相關代碼的效果。

在使用前的注意事項：

這些在官網的“開發文檔”欄目有的，建議用前一定要閱讀一下它的文檔。

 

建立html文件（頭尾這邊就省略了），引用jPlayer相關js、css文件（css文件有多種樣式可供選擇這邊隨便引用一種）：

 

<span style="white-space:pre">      </span><link href="./dist/skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<span style="white-space:pre">      </span><script type="text/javascript" src="./lib/jquery.min.js"></script>
<span style="white-space:pre">      </span><script type="text/javascript" src="./dist/jplayer/jquery.jplayer.min.js"></script>

 

開始寫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">
           <!-- 視頻中間的play大按鈕 -->
            <div class="jp-video-play">
                <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
            </div>

            <div class="jp-interface">
               <!-- 視頻中間的play大按鈕 -->
                <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-details">
                    <div class="jp-title" aria-label="title"> </div>
                </div>
                <!-- 控制按鍵 -->
                <div class="jp-controls-holder">
                   <!-- 聲音按鍵 -->
                    <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-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-toggles">
                        <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                        <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部附加文字內容 -->
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>

 

剩下的就是JS代碼了：

 

<script type="text/javascript">
$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
               title: "Big Buck Bunny",
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",//視頻文件
               ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",//視頻文件
               webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",//視頻文件
               poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"//視頻初始時圖片
            }).jPlayer("play")//自動播放
        },
       swfPath: "../js/jPlayer/dist/jplayer/jquery.jplayer.swf",//當不支持html5的時候啟用swf flash
       supplied: "webmv, ogv, m4v", //包含的文件格式
       size: {
            width: "640px",
            height: "360px",
           cssClass: "jp-video-360p"
        },
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true

    }).jPlayer("play").jPlayer("repeat");//自動播放 自動循環
})
</script>

代碼完成。

 

打開網頁，查看效果：

底部這些顯示樣式都是可以更改的，可以引用它自己其余的css樣式，也可以自己在css文件中設置。

 

三、遇到的BUG以及處理：

1.本人引用是在自己的html文件中引用的，文件中還包括其他的代碼，當按照上邊代碼寫的時候。報錯：

 

$(...).jPlayer is not a function

即在jQuery中調用jPlayer函數時報錯，造成這種BUG的原因有可能是：

 

 

1.沒有引用成功jpalyer.js文件或者引用路徑有問題；
2.沒有引用jQuery文件或者引用路徑有問題；
3.有可能你在html最后又引用了另一個版本的jquery.js文件，導致不能識別是用哪個jquery

 

2.當把視頻文件換成自己本地的flv文件后，視頻無法播放，出現播放區域無的現象，經上網查詢得知：

 

jPlayer在引用本地文件時，直接訪問本地的html是無效的，要將html放到服務器上，以IP地址的形式訪問才行。

 

3.至於兼容性問題，不需要手動自己處理，jPlayer官網上已經說明他的兼容問題，經過上邊操作，是可以成功在IE7中展示的，如果出現無法展示情況，可能是：

 

js代碼中最后的設置屬性后的逗號沒有去除

即，根據IE的報錯，找到報錯那一行或者報錯的前一行，最后一個逗號要去掉，這可能是因為IE對jQuery代碼要求比較嚴格，逗號是不允許的。 

 

另外，如果不是這個問題，IE也沒有報錯，就是展示不出來，那就只有可能是你配置的問題。

完。