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"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </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"> </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;
};