天天看點

阿裡雲點播 web 播放器

淺談

最近遇到很多人使用阿裡雲點播 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

  • 建立一個 input bucket 和 output bucket ,都要和 MTS 一個 region,這裡用 shenzhen 的 region 作為測試,region 不一緻可能導緻 signature 檢查失敗。
  • 建立 OSS 一定要選擇标準存儲,權限的話建議用私有的是最安全的。
阿裡雲點播 web 播放器

配置媒體處理

先配置下 MTS 的媒體庫設定,一共要設定三個,工作流、媒體 bucket、播放鑒權

  • 播放鑒權就是計算 signature 的 key ,類似加鹽的操作,避免别人盜播你的視訊,這裡我們先設定為 secret ;
    阿裡雲點播 web 播放器
  • 關聯媒體 bucket ,讓 MTS 知道輸入的 bucket 和輸出的視訊存儲位置,這個地方原和目的可以綁定多個,隻能綁定

    同一個 region 的不同 bucket

    阿裡雲點播 web 播放器
  • 建立工作流 ? 為什麼呢 ? 因為播放器用到的 mediaID 是通過工作流轉碼的視訊才會有的,mediaID 就是專門用來播放轉碼後視訊的,這個不同于 jobID;
    • 這裡測試的是 m3u8 的轉碼
      阿裡雲點播 web 播放器
    • 選擇輸入原為建立的 OSS 源;
      阿裡雲點播 web 播放器
    • 選擇輸出目的為建立的 OSS 輸出;
      阿裡雲點播 web 播放器
    • 釋出轉碼後的視訊,手動類似稽核完成後使用者手動釋出,自動釋出就是轉碼完成後自動釋出到 OSS ,釋出的意思就是同步告知給 OSS ,視訊已經可以進行播放。
      阿裡雲點播 web 播放器
    • 下一步,綁定 CDN 域名,目的有兩個,一是、OSS 播放流量太貴很多人要求用 CDN 播放,二是、必須要關聯一個備案的域名。
      阿裡雲點播 web 播放器
  • 上傳測試的視訊到 OSS 後, 工作會自動檢測到 OSS 有問價上傳,觸發工作流的轉碼後,将轉碼的檔案輸出到 目的 bucket ,同時沒庫中會生成我們的轉碼後的視訊供稽核,這裡可以擷取到 mediaID;這裡是自動釋出,如果工作流是手動釋出,一定要點選釋出,不然播放時會出現報錯沒有釋出;
    阿裡雲點播 web 播放器

萬事俱備隻欠東風

  • 準備 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))           

終結

将所有獲得到的資訊回填到播放器中即可大功告成

阿裡雲點播 web 播放器