阿里云点播 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

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 pythonimport json
import hmac
import sha
import urllib
import base64values={}
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 播放器相关推荐

阿里云点播集成播放器的SDK时遇到的黑屏有声音的问题
在集成阿里云的点播功能时,集成他的sdk后播放视频遇到,有声音没有画面的问题! 在mPlayer = new AliVcMediaPlayer(AliVcMediaPlayerActivity.thi ...
阿里云移动端播放器高级功能---安全播放
基本介绍如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 那么在播放器中支持哪一些安全播放的机制呢? 这里有料:视频安全解决方案. Refer ...
阿里云点播获取播放路径
阿里云点播获取播放路径需要的jar包代码 #背景介绍一个项目听说要做视频点播,发现阿里有云播放模块.尝试把视频放在上面,项目只能数据存储和播放.但是怎么获取到云播放视频的地址走了一点弯路记录一下 ...
阿里云移动端播放器高级功能---直播时移
基本介绍通常都知道直播是无法seek拖动的,那么针对在直播中想回看之前直播过的内容的用户来说,直播时移就能派上用场.我们阿里云播放器支持了直播时移功能,用户能较为方面和快速的使用直播时移的功能. 先 ...
阿里云移动端播放器高级功能---视频下载
基本介绍优酷.爱奇艺.腾讯等主流的视频类App都有视频离线下载的功能,主要目的是在wifi下将视频离线在本地,然后在无网或者4G的情况下去观看离线视频.那么阿里云播放器也提供了视频下载的功能.这个功 ...
阿里云移动端播放器高级功能---画面控制 1
基本介绍经常遇到一些开发者问: 1.我们播放的时候,会有黑边怎么处理?尤其是在类似于抖音,直播这样的场景下,如果视频有黑边,很影响画面的视觉效果.而阿里云播放器提供了缩放功能,用来去除黑边,达到视频 ...
阿里云移动端播放器高级功能---截图和音频波形
基本介绍如果用户对视频播放中的某一帧画面特别感兴趣,可以使用截图功能将这一帧视频保存起来.另外有一种场景想知道是否有声音,或者想感知声音的大小震动频率等,可以通过显示一个声音的波形来形象的表示.如下 ...
阿里云移动端播放器高级功能---截图和音频波形 1
基本介绍如果用户对视频播放中的某一帧画面特别感兴趣,可以使用截图功能将这一帧视频保存起来.另外有一种场景想知道是否有声音,或者想感知声音的大小震动频率等,可以通过显示一个声音的波形来形象的表示.如下 ...
阿里云移动端播放器高级功能---画面控制
基本介绍经常遇到一些开发者问: 1.我们播放的时候,会有黑边怎么处理?尤其是在类似于抖音,直播这样的场景下,如果视频有黑边,很影响画面的视觉效果.而阿里云播放器提供了缩放功能,用来去除黑边,达到视频 ...

阿里云点播 web 播放器

浅谈

备料

播放器代码

tips

开通测试 OSS

tips

配置媒体处理

万事俱备只欠东风

终结

阿里云点播 web 播放器相关推荐

最新文章

热门文章