阿里云视频播放实现

最新推荐文章于 2021-05-21 20:13:11 发布

weixin_33928467

最新推荐文章于 2021-05-21 20:13:11 发布

阅读量893

点赞数

文章标签：前端测试数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/marvinemao/p/7468877.html

版权

阿里云视频播放实现

前段时间乐视深陷囹圄，导致其云视频业务受到影响。而我们公司又正好用到的是乐视云存储视频，所以在领导再三思量之下决定换云视频存储服务商。首先想到的是阿里云视频存储，毕竟服务器是放在阿里云上的。增加个视频业务对于运维来说是很方便的。那么问题来了，谁来研究阿里云视频的api呢？然后就落到了我身上。
其实在我看来无非就是拿到播放地址，然后用特定的播放器放到页面中播放出来就完了。当时我也不知道为什么，上传一个视频怎么找播放地址都没找到（最近又上阿里云点播控制台看，播放地址又神奇地出来了）不知道是权限没配好还是其他原因。最后选择通过获取播放凭证完成视频播放。所以就得按照文档一步一步实现了。

生成签名

对请求参数的键值对进行编码，然后序列化得到串
按照要求在串添加几个参数，用“&”和“=”连接
使用哈希算法是SHA1对字符串进行编码
按照Base64编码规则把上面的HMAC值编码成字符串，即得到签名值（Signature）

var TokenGenerator = require('uuid-token-generator'),
    superagent = require('superagent'),
    jsSHA = require("jssha");

var tokgen = new TokenGenerator(), //生成随机串
      shaObj = new jsSHA("SHA-1", "TEXT"); //加密

//公共参数键值对
var arr = ['Action', 'Version', 'AccessKeyId', 'Timestamp', 'SignatureMethod', 'SignatureVersion', 'SignatureNonce', 'Format', 'VideoId'];
var obj = {
    Action: 'GetVideoPlayAuth',
    Version: '2017-03-21',
    AccessKeyId: accessKeyId,
    Timestamp: nowTime(),
    SignatureMethod: 'HMAC-SHA1',
    SignatureVersion: '1.0',
    SignatureNonce: tokgen.generate(),
    Format: 'JSON',
    VideoId: vid
};

var lastArr = arr.sort(), //参数名序列化
        str = '';

//组装
for(var i in lastArr) {
    if(i == lastArr.length-1) {
        str += encodeURIComponent(lastArr[i]) + '=' + encodeURIComponent(obj[lastArr[i]]);
    } else {
        str += encodeURIComponent(lastArr[i]) + '=' + encodeURIComponent(obj[lastArr[i]]) + '&';
    }
}

//编码串
var StringToSign = 'GET'+'&'+'%2F'+'&'+encodeURIComponent(str);

//加密
shaObj.setHMACKey(accessKeySecret+'&', "TEXT");
shaObj.update(StringToSign);

var hmac = shaObj.getHMAC("B64");

在这里遇到过一个小坑，在步骤1进行一次编码。在步骤2还要进行一次编码。我当时就编码了一次发现最总结构不对。最后比对发现是一个等号与给的官方demo不一样，最后找原因发现等号被编码了两次。所以在这里漏掉了一次。

获取播放凭证

将上面生成的签名参数加到阿里云获取播放凭证的统一接口地址后面请求获得播放凭证。至此获得播放凭证就结束。

播放

使用阿里云点播官方提供的js-sdk进行视频播放，直接上代码

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  <title>用户测试用例</title>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/1.7.6/skins/default/index.css" />
  <script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/1.7.6/prism.js"></script>
  </head>
  <body>
  <h3>服务端认证</h3>
  <div class="prism-player" id="J_prismPlayer"></div>
  <br/>
  <br/>
  <br/>
  <a href="./on_browser">前端前端认证</a>
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script>
  $(function() {
    var option = {id: "J_prismPlayer",autoplay: false ,width: "800px",height: "600px",vid: "4c92b2e8061d4fde8bb4675c311a2afc",playauth: ""};
    /**
     * 请求认证串
     * @author mao
     * @version version
     * @date    2017-07-06
     */
    function excuteVideo() {
      var that = arguments;
      $.ajax({
        type:'get',
        url:'./auth',
        success:function(res) {
          option.playauth = res.PlayAuth;
          var player = new prismplayer(option);
        },
        error: function(xhr, error) {
          if(error == 'error') {
            that.callee();
          }
        }
      });
    }
    //触发
    excuteVideo();
  })
  </script>
  </body>
</html>

上述获取播放凭证的工作是由服务器发起，然后拿到返回值在传给前端处理。这里我用nodejs模拟了一下服务器拿到播放凭证把阿里云视频这套走通了。
其实这些所有的东西前端也是可以做的，所以我又在浏览器环境下实现了一次。
上述代码都在这里

转载于:https://www.cnblogs.com/marvinemao/p/7468877.html

weixin_33928467

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿里云视频播放实现

阿里云视频播放实现前段时间乐视深陷囹圄，导致其云视频业务受到影响。而我们公司又正好用到的是乐视云存储视频，所以在领导再三思量之下决定换云视频存储服务商。首先想到的是阿里云视频存储，毕竟服务器是放在阿里云上的。增加个视频业务对于运维来说是很方便的。那么问题来了，谁来研究阿里云视频的api呢？然后就落到了我身上。其实在我看来无非就是拿到播放地址，然后用特定的播放器放到页面中播放出来就完了。当时我也...
复制链接

扫一扫