阿里云点播 web 播放器

2022-03-03 06:32:06

作者：张医博

浅谈

最近遇到很多人使用阿里云点播 web 播放器，通过 STS 令牌的方式去播放 MTS 转码完成后的资源出现问题，”路见不平一声吼，写个过程先献丑“，只是做了最基础的功能，看官有需要请到阿里云点播官网看下需要的功能自己补充。

备料

开通媒体处理服务（MTS）；（必选）
开通一个 CDN 域名；（必选）
开通 OSS 服务；（必选）
一个健康的小视频 ^_^（必选）
准备一个服务端搭建好 web 环境（必选）

播放器代码

<!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="//g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.2/aliplayer-min.js"></script>
    </head>
    <body>
        <div  class="prism-player" id="J_prismPlayer"></div>
        <script>
            var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: true,
            format: 'm3u8',
            //播放方式三：仅MPS用户使用
            vid : 'db09b2332a554166beeb747277660ee8',
            accId: 'STS.NJcpLE6Thqth9uhrvTYcnCjjv',
            accSecret: '9DiQyic6TDUQ8A87vaP4lxquUDkHHx9alpXvsqnV2U8J',
            stsToken: 'CAIS9QF1q6Ft5B2yfSjIr4nWO/bx24tJxrapO1PZlnYBVexCrK/BlDz2IHBOfHhuBOsfsfk3mGxQ6PsdlqJjSpZCQE3Cd8x048zpR452+s6T1fau5Jko1beHewHKeTOZsebWZ+LmNqC/Ht6md1HDkAJq3LL+bk/Mdle5MJqP+/UFB5ZtK7veVzddA8pMLQZPsdITMWCrVcygKRn3mGHdfiEK00he8TovtPTvmZDAtkuA1w8hkrQvyt6vcsT+Xa5FJ4xiVtq55utye5fa3TRYgxowr/cs1P0apGye4YzFXwUJvUjZKYnE89RoKQ5/fK8+Fr6DaD9BYEa20RqAAXiKYiDvEr9D5BqHp8g6/Oy6EBI+rXwGY0UWRo1YkXsIE9dY78rsL6mHLP19HJXCN6qnuYXgAZHzUr8/cmlko2hBhV4XGaJdsI4t+vVLHIbLY/0Yn7BqvZmR21QB7Q1GkAzdd4gHxtoTBSH5sng+nTOAXKgaXjLS7OSW2dU7biiY',
            domainRegion: 'cn-shenzhen',
            authInfo: '{"ExpireTime":"2018-11-25T23:59:59Z","MediaId":"db09b23k2a554166beeb9m7297660ee8","Signature":"v3P/ijg/ycMeUk/89Hzx9WG/zYE="}'
            },function(player){
                console.log('播放器创建好了。')
           });
        </script>
    </body>
</html>

tips

H5 的播放器需要切换 format 为 m3u8 ，默认为 mp4 ，目前支持 m3u8 和 mp4 格式。
vid 是用户的媒体处理控制台媒体库中看到的 mediaID
sts 是通过 STS 代码获取到的临时 token 完整信息。
authoInfo 是我们计算的 signature ，包含了我们自定的 secret。

以上信息全部都是改完的，不是真是用户数据。

开通测试 OSS

tips

创建一个 input bucket 和 output bucket ，都要和 MTS 一个 region，这里用 shenzhen 的 region 作为测试，region 不一致可能导致 signature 检查失败。
创建 OSS 一定要选择标准存储，权限的话建议用私有的是最安全的。

配置媒体处理

先配置下 MTS 的媒体库设置，一共要设置三个，工作流、媒体 bucket、播放鉴权

播放鉴权就是计算 signature 的 key ，类似加盐的操作，避免别人盗播你的视频，这里我们先设置为 secret ；
关联媒体 bucket ，让 MTS 知道输入的 bucket 和输出的视频存储位置，这个地方原和目的可以绑定多个，只能绑定同一个 region 的不同 bucket；
创建工作流？为什么呢？因为播放器用到的 mediaID 是通过工作流转码的视频才会有的，mediaID 就是专门用来播放转码后视频的，这个不同于 jobID；
这里测试的是 m3u8 的转码
选择输入原为创建的 OSS 源；
选择输出目的为创建的 OSS 输出；
发布转码后的视频，手动类似审核完成后用户手动发布，自动发布就是转码完成后自动发布到 OSS ，发布的意思就是同步告知给 OSS ，视频已经可以进行播放。
下一步，绑定 CDN 域名，目的有两个，一是、OSS 播放流量太贵很多人要求用 CDN 播放，二是、必须要关联一个备案的域名。
上传测试的视频到 OSS 后，工作会自动检测到 OSS 有问价上传，触发工作流的转码后，将转码的文件输出到目的 bucket ，同时没库中会生成我们的转码后的视频供审核，这里可以获取到 mediaID；这里是自动发布，如果工作流是手动发布，一定要点击发布，不然播放时会出现报错没有发布；

万事俱备只欠东风

准备 STS
计算 signature
计算 STS 请参考我单独的介绍， STS 扮演的角色一定要授权，点播播放器权限、MTS 播放权限，OSS 管理权限。计算的代码如下；

package oss;

import com.aliyun.oss.ClientConfiguration;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.http.ProtocolType;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import com.aliyuncs.sts.model.v20150401.AssumeRoleRequest;
import com.aliyuncs.sts.model.v20150401.AssumeRoleResponse;

public class AssumeRole {

    /*
     * 描述：生成 STS 的方式上传
     * 
     */
    public void MakeSTSToken(String accessKeyId, String accessKeySecret, String roleArn,String roleName) throws ClientException {
        ClientConfiguration conf = new ClientConfiguration();
        conf.setMaxConnections(200);
        IClientProfile profile = DefaultProfile.getProfile("ram region", accessKeyId, accessKeySecret);
        DefaultAcsClient client = new DefaultAcsClient(profile);
        AssumeRoleResponse response = assumeRole(client, roleArn,roleName);
        AssumeRoleResponse.Credentials credentials = response.getCredentials();

        System.out.println(credentials.getAccessKeyId() + "\n" + credentials.getAccessKeySecret() + "\n"
                + credentials.getSecurityToken() + "\n" + credentials.getExpiration());
    }

    private static AssumeRoleResponse assumeRole(DefaultAcsClient client, String roleArn,String roleName) throws ClientException {
        final AssumeRoleRequest request = new AssumeRoleRequest();
        request.setVersion("2015-04-01");
        request.setMethod(MethodType.POST);
        request.setProtocol(ProtocolType.HTTPS);
        request.setDurationSeconds(3600L);
        request.setRoleArn(roleArn);
        request.setRoleSessionName(roleName);
        return client.getAcsResponse(request);
    }
}

计算 signature 代码如下

 #!/usr/bin/env python

import json
import hmac
import sha
import urllib
import base64

values={}
key = 'secret'
values['ExpireTime'] = '2018-11-17T12:21:50Z'
values['MediaId'] ='db09b2332a554166beeb947277660ee8'

def caculate():
  data=urllib.urlencode(values)
  mac = hmac.new("{0}".format(key),"{0}".format(data), sha)
  Signature = base64.b64encode(mac.digest())
  jsons = {
      "ExpireTime":"{0}".format(values['ExpireTime']), \
      "MediaId":"{0}".format(values['MediaId']), \
      "Signature":"{0}".format(Signature) \
      }
  print(json.dumps(jsons))

终结

将所有获得到的信息回填到播放器中即可大功告成

码农公寓

浅谈

备料

播放器代码

tips

开通测试 OSS

tips

配置媒体处理

万事俱备只欠东风

终结

相关文章