Web前端視頻播放及視頻的雲存儲

一、視頻播放

　　為了兼容各種類型的瀏覽器，經過調研選擇了Js播放器Jplayer，在支持html5的瀏覽器中能夠使用video播放方式，在不支持的瀏覽器中則會使用flash方式播放。

　　html代碼如下，需要要引用一個js文件jquery.jplayer.min.js，一個css文件jplayer.blue.monday.css,可在http://www.jplayer.cn/下載。

<div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player">
    <div class="jp-type-single">
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
        <div class="jp-gui">
            <div class="jp-video-play">
                <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
            </div>
            <div class="jp-interface">
                <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">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                <div class="jp-controls-holder">
                    <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-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-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 class="jp-details">
                    <div class="jp-title" aria-label="title">&nbsp;</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代碼如下：mv4、ogv、webmv為三種格式的視頻地址，poster為顯示圖片的地址，swfPath為swf文件的目錄地址，這個是為了播放flash用的，有時候在chrome瀏覽器可以播放在IE瀏覽器播放不成功就是因為swf路徑配置不對。

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "",
                m4v: "",
                ogv:"",
                webmv:"",
                poster:""
            });
        },
        play: function() { // To avoid multiple jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        swfPath: "/static/lte/js/jplayer", 
        supplied: "webmv, ogv, m4v",
        globalVolume: true,
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true
    });

　　該視頻播放器可通過點擊進度條選擇播放的時間點，但需要提供視頻的服務器是流媒體服務器，一般的服務器不能隨意點擊播放進度條。

二、視頻文件的雲存儲

　　視頻文件的特殊性使得我們不能使用一般的服務器進行存儲，要保證視頻的流暢播放需要使用到流媒體服務器，但是存儲和維護的成本較高，對於個人或小企業就可以選擇使用雲存儲。

　　本人選擇的是九牛雲存儲，即可以通過接口將視頻傳輸至雲端，返回視頻地址。同時還可以通過特定的rest傳參對視頻進行各種操作，如轉碼、壓縮等。

　　需要上傳的主要有三個參數，key為上傳的文件名，即如果雲端你的個人空間已存在該文件則會被覆蓋。token是最重要的一個數據，后面將會詳細講解，file則是需要上傳的文件。

    formData.append('key', key);
    formData.append('token', token);
    formData.append('file', f);

 

　　接下來將要詳細講token的生成，其中很重要的一個是putPolicy，即定義上傳的一系列參數。scope格式為"空間名：文件名"，dealine:指的這次上傳會話的截止時間，即到哪個時間點這次會話結束，我的理解就是這個文件最多只能傳到這個截止時間，要是沒傳完也中斷掉，一般設置為3600秒，也就是一個小時。

　　deadline的時間可以設置為：var time = Math.round(new Date().getTime() / 1000) + 3600;

 var putPolicy = {
        "scope": scope,
        "deadline": time,
        "returnBody": '{"key":$(key),"name":$(fname),"hash":$(etag)}'
    };

　　獲取token則是如下所示：accessKey和secretKey都是注冊之后獲得的字段，在計算過程中需要引入CryptoJS.js。還有幾個要用的方法在九牛官網下載的demo中也可獲得。

var genUpToken = function(accessKey, secretKey, putPolicy) {

    //SETP 2
    var put_policy = JSON.stringify(putPolicy);
    console && console.log("put_policy = ", put_policy);

    //SETP 3
    var encoded = base64encode(utf16to8(put_policy));
    console && console.log("encoded = ", encoded);

    //SETP 4
    var hash = CryptoJS.HmacSHA1(encoded, secretKey);
    var encoded_signed = hash.toString(CryptoJS.enc.Base64);
    console && console.log("encoded_signed=", encoded_signed)

    //SETP 5
    var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;
    console && console.log("upload_token=", upload_token)
    return upload_token;
};