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

1、視頻播放

　　爲了兼容各類類型的瀏覽器，通過調研選擇了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代碼以下：mv四、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
    });

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

2、視頻文件的雲存儲

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

　　本人選擇的是九牛雲存儲，便可以經過接口將視頻傳輸至雲端，返回視頻地址。同時還能夠經過特定的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;
};