flowplayer視頻播放插件

最近項目中需要添加播放視頻的功能，視頻文件是flv格式的。在網上找了一些jQuery視頻播放插件，還是覺得“flowplayer”要好一些。特將使用方法記錄一下。

flowplayer也有html5版本的，但由於網站為了支持IE較低版本，還是選擇了flash版本的。

flowplayer官網：http://flowplayer.org/

一. 介紹：Flowplayer支持播放flv、swf等流媒體以及圖片文件，能夠非常流暢的播放視頻文件，支持自定義配置和擴展。

二. 調用:

    1. 在頁面頭部Head標簽內添加引用 （我使用的是3.2.12免費版，最新版可從官網下載）

  <script src="../../js/flowplayer/flowplayer-3.2.11.min.js" type="text/javascript"></script>

    2. 在頁面中添加播放器實例化代碼：

   這里介紹兩種調用方法

   方法一：

    <a href="/Video/story.flv" style="display: block; width: 670px; height: 450px" id="tl_player">
    </a>
    <script>
        flowplayer("tl_player", "/js/flowplayer/flowplayer-3.2.12.swf");
    </script>

 說明：

將a標簽的href屬性指向要播放的視頻地址，設置播放器顯示時的寬度和高度，設置a標簽為display:block，並為a標簽指定id，該id用於flowplayer的js調用。

 

方法二：

    <div id="tl_player" style="width: 670px; height: 450px;">
    </div>
    <script>
        flowplayer("tl_player", "/js/flowplayer/flowplayer-3.2.12.swf", { clip: { url: "/Video/story.flv", autoPlay: false, autoBuffering: true} });
    </script>

說明：

也可以用div或者span 等其他標簽來作為播放器的容器，但要給定其style的高度，寬度且為塊級元素。

一些設置參數：clip方法里的url：表示視頻文件的真實地址，autoPlay：表示是否自動播放，默認是true，autoBuffering：表示是否自動緩沖，即當視頻文件設置為不自動播放時，播放器仍然預先下載視頻文件內容。

三. 免費版的缺點：

    1. 播放器在剛開始加載時，左下角會有一個logo，不過是一閃而過，正常播放時沒有。

     

 

    2. 播放器在全屏時右上角會有一個大的logo標，不過在非全屏模式下不會顯示。

     全屏模式下效果：

      

      非全屏模式下：

      

      3. 右鍵菜單：

      

 

附：我使用的3.2.12免費版及測試時的 Demo代碼