使用JCplayer在本身的網站上播放視頻

在我的網站上放一兩段視頻早已經不是什麼新鮮事了，最簡單的辦法就是把視頻傳到youku/愛奇藝/土豆等等視頻分享網站，經過審覈併發布，選分享，以後會獲得一端代碼，把代碼放進本身的網頁html裏就能夠嵌入一個播放器來播放上傳的視頻了。

但如今的視頻分享網站是愈來愈沒有節操了，各類審覈不說，視頻以前的廣告從一開始的15秒到30秒，如今已經進化到了滅絕人性的一分鐘了，我知道網站是靠廣告賺錢的，但我根本不信廣告要長到1分鐘才能賺到錢，既然已經賺得鉢滿盆滿了，幹嗎不對用戶仁慈點？

好吧牢騷發完，既然視頻分享網站有種種問題---有時候老總對公司的網站視頻前面出現一段廣告是深惡痛絕的----咱們不得不想一想其餘的辦法，好比本身來實現這個視頻播放的功能。

目前各種的解決方法真的很多，這裏有兩個連接介紹了不少免費的視頻播放器：

http://www.blogjava.net/xcp/archive/2011/01/21/343308.html

http://www.open-open.com/news/view/e25eb0

我在反覆比較以後選用了JCplayer

一.爲何選擇JCplayer

它的優勢主要有如下幾個：

1. 免費

jcplayer的使用效果徹底能夠和jwplayer（youtube用的播放器就是jwplayer，但jwplayer是收費的）相比，有兩個版本，免費版和收費版的惟一區別就是免費版左上角有一個jcplayer的標記，交錢的話能夠去掉。這個問題可大可小，由於youku愛奇藝等等的視頻也是加了水印的，但若是以爲水印沒法忍受，能夠選擇video.js這一類的開源播放器，但這樣的話會面對下面的問題：

2. 兼容性好

jcplay在ie6下表現良好，而video.js等各種開源播放器由於不少是主要用html5來實現的，不少不支持ie低版本，即便表現最好的在ie6下也會出現按鈕錯位、無效的狀況，能夠用慘不忍睹來形容。與之相比，jcplayer在左上角加一個微不足道的標記真的算不了什麼。

3. 界面多種多樣能夠定製

4. 播放器的實現方式不少

即包括最多見的flash方式也包括適用於ios的js方式。

二. JCplayer的使用：

http://www.jcplayer.com/free-download.html

先去官網下載免費版，裏面包含了全部的代碼，一些例子和詳盡的用戶手冊。

jcplayer播放器的實現方式有四種：swf、swf-object、javascript、auto-detect，其中swf方式是使用flash來實現的，在pc端的ie6-九、chrome、firefox等瀏覽器下表現很是好（須要安裝flash插件），但ios下無效，javascript用的是html5技術，在ios下表現良好，可是ie低版本就無效。

根據jcplayer的介紹，auto-detect方式應當可以根據瀏覽器環境自行選擇合適的播放方式，但經我實測，auto-detect方式在pc的全部瀏覽器上表現良好，ios下是沒反應的，很奇怪，因此這地方須要咱們本身動手寫代碼判斷一下環境，而後選用swf或javascript方式。

（注意：javascript方式不支持flv格式的視頻，由於flv是flash格式，若是你有一段視頻，推薦轉爲mp4，體積小，使用範圍廣。）

通常而言swf方式是比較通用的，因此後面以swf方式爲主。

1.選擇界面風格

決定了播放器的實現方式以後咱們須要選擇一下界面效果，在官網提供了一個在線的編輯器：

http://www.jcplayer.com/online-panel.html

主要有slimbar aquarium  minimalist三種風格，每一種又能夠定製，好比取消分享按鈕，取消音量按鈕等等，在這個編輯器上均可以作到，設計好以後點擊「Get embed code」，設置一下分辨率，再把播放器的方式選爲swf（通常默認就是swf），source xml能夠保持不變，其餘的選擇也不變，點擊copy code就能夠獲得一段代碼。

把這段代碼放入你的網頁html裏想要嵌入播放器的位置。

2.指定視頻文件位置

而後是編寫source.xml，這裏注意，假設你的網頁文件是index.html，那麼source.xml必定要放在和index.html一個目錄下，否則javascript方式就會無效，而swf方式雖然能夠播放，但封面圖也會變成一片黑，這裏應該是個bug。

source.xml的內容相似：

<?xml version="1.0" encoding="utf-8"?>
<playlist>
    <title><![CDATA[New Playlist]]></title>
    <items>
        <item>
            <title><![CDATA[this is title]]></title>
            <description><![CDATA[this is description]]></description>
            <image>video/test.jpg</image>
            <duration>30</duration>
            <source>video/test.mp4</source>                
            <sourceType>direct</sourceType>
        </item>
    </items>
</playlist>

很好理解，title和description不支持中文，能夠去掉，image是封面，播放器剛加載到網頁上的時候顯示該封面，source就是視頻文件的位置。其餘的默認就好。

（我在這裏把封面文件test.jpg和test.mp4都放在video子目錄下了，若是你放在別的位置，改成對應位置便可）

3. 上傳代碼

而後上傳播放器的代碼，在jcplayer的壓縮包裏，HTML embed/Templates目錄下，有三個子目錄Aquarium，Minimalist，SlimBar分別對應三種風格的界面，每一個目錄下面又有四個子目錄，分別對應不一樣的實現方式。

若是你以前選的是minimalist風格，swf方式，那麼就進到Minimalist\Embed_SWF目錄下把minimalist.swf上傳到你的網站空間裏。（若是使用javascript就進到\Minimalist\Embed_JavaScript目錄下把Minimalist.js上傳到網站空間裏，其餘方式和風格的以此類推。）

以後須要修改網頁，指定播放器代碼的位置，好比你把minimalist.swf上傳到你網站根目錄下的video子目錄，那麼就要修改index.html裏的代碼，找到

data="Minimalist.swf"

和

 <param name="movie" value="Minimalist.swf">

把Minimalist.swf改成正確的位置（video/Minimalist.swf）便可。

4. 完成

此時訪問index.html，便可看到你的網站上嵌入了一段視頻，能夠播放、調節音量，全屏等等。

三. 經過第三方視頻存儲空間來存放視頻

如今咱們的網站上能夠播放本身的視頻了，並且是無廣告的純綠色視頻，但若是你空間很小，或者速度很慢，視頻播放的體驗絕對是不好的，這時候能夠利用第三方的視頻存儲空間來存放咱們的視頻。

以百度媒體雲的視頻服務爲例，去http://developer.baidu.com/  申請個帳戶，建個應用而後選媒體雲：

接着選視頻服務：

上傳本身的視頻，而後複製url，把source.xml裏的

<source>video/test.mp4</source>  

test.mp4替換爲你上傳到媒體雲的視頻的url，便可在不佔用本身主頁空間的狀況下，在網頁上放置視頻，由於百度媒體雲的速度很快，這種方式甚至可能比jcplayer播放服務器本地的視頻還快。

四. jcplayer的缺點：

1. 以前說過的auto-detect在ios下無效的bug

2. 無法作到像是youku那種在進度條上隨便點一點，便可跳到該點播放的功能

jcplayer只能作到在已經下載的內容裏點擊跳播，好比一個視頻，你只下載了前一半，那麼只能在前一半里點某個點而後跳過去播放，後一半必須下載完才能夠作到這種功能。

這也很好理解，youku那種跳播僅僅靠前端是無法實現的，必須寫後端代碼，有服務器的支持。