阿里云点播 web 播放器

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
视频点播 VOD,流量+存储+转码
简介: 最近遇到很多人使用阿里云点播 web 播放器,通过 STS 令牌的方式去播放 MTS 转码完成后的资源出现问题,”路见不平一声吼,写个过程先献丑“,只是做了最基础的功能,看官有需要请到阿里云点播官网看下需要的功能自己补充。

作者:张医博

浅谈

最近遇到很多人使用阿里云点播 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 一定要选择标准存储,权限的话建议用私有的是最安全的。
    image.png

配置媒体处理

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

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

万事俱备只欠东风

  • 准备 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))

终结

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

相关文章
|
2月前
|
缓存 Kubernetes Java
阿里云 SAE Web:百毫秒高弹性的实时事件中心的架构和挑战
SAE 事件中心通过智能诊断显示通知与用户连接起来,SAE WEB 百毫秒弹性实例给事件中心带来了新的实时性、海量数据和高吞吐的挑战,本篇将带您了解 SAE 整体事件中心的架构和挑战。
131 10
|
3月前
|
前端开发 搜索推荐 JavaScript
Web前端网站(四)- 音乐播放器
【8月更文挑战第9天】页面整体色调背景采用柔和渐变的方式呈现,与主页面的“毒药水式”色彩搭配形成了强烈的对比;周边花瓣缓缓飘落到水面之上形成涟漪。整体给人一种温馨、浪漫的感觉,还可以通过中间的3个按钮来控制音乐的切换和播放效果。每一行代码都有详细注释~~~大家可以尽情创作
38 2
Web前端网站(四)- 音乐播放器
|
4月前
|
弹性计算 数据库 数据安全/隐私保护
阿里云服务器真香宝典之Calibre-Web个人图书馆云端部署
在阿里云ECS(2核2G,SSD40G,3M带宽)上,安装Ubuntu 22.04,然后配置Docker和FTP。创建 `/config` 和 `/books` 目录,设置权限,开放端口,拉取 `johngong/calibre-web` Docker镜像,以`calibre-web`命名容器,映射端口,配置环境变量,挂载卷,确保重启策略。本地安装Calibre客户端,上传metadata.db到服务器。在Calibre-web服务端配置数据库,启用上传权限,修改管理员账户信息。完成配置后,开始上传电子书并进行阅读。
406 2
阿里云服务器真香宝典之Calibre-Web个人图书馆云端部署
|
5月前
|
监控 Serverless 持续交付
阿里云云效产品使用问题之如何让流水线支持构建 flutter web 应用到 OSS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
4月前
|
安全 API 开发者
阿里云web应用
设备端将图片编码为base64发送至物联网平台,在web界面配置图片选择物联网平台配置的数据(base64),实现设备向云平台的图片的上传,以及在web界面上显示图片。
|
6月前
|
弹性计算 关系型数据库 MySQL
【阿里云弹性计算】从零搭建:基于阿里云ECS的高性能Web服务部署实践
【5月更文挑战第21天】本文介绍了如何使用阿里云ECS搭建高性能Web服务。首先,注册阿里云账号购买ECS实例,选择合适配置。接着,通过SSH连接实例,更新系统并安装Apache、PHP和MySQL。创建网站目录,上传代码,配置数据库和PHP。然后,启用Gzip压缩和KeepAlive,调整Apache并发连接数以优化性能。此教程为在阿里云上构建高效Web服务提供了基础指南。
178 5
|
6月前
|
存储 Serverless 网络安全
Serverless 应用引擎产品使用之阿里云函数计算中的Web云函数可以抵抗网站对DDoS攻击如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
6月前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
6月前
|
应用服务中间件 Linux Apache
阿里云服务器Linux一键安装web环境全攻略
阿里云服务器Linux一键安装web环境全攻略

热门文章

最新文章