Web前端视频播放及视频的云存储

Posted 2020-06-11

一、视频播放

　　为了兼容各种类型的浏览器，经过调研选择了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;
};