前端-阿里云视频点播

最近在看阿里云的视频点播方面、梳理一下所得知识吧。（参考阿里云视频点播技术文档）

关于SDK

刚接触开发的小伙伴可能会摸不清SDK到底是个啥，其实我们每天都在用这个东西。SDK(Software Development Kit,软件开发工具包)，也就是第三方的服务。比如我们每天用的地图、支付、验证码、人脸识别、等等等等……

通常，SDK会由专业的公司提供专业的服务的集合，比如移动支付技术、语音识别技术。例如点外卖可以用微信支付、支付宝支付，在美团上买了电影票，点击地址会显示高德地图、百度地图等。

关于OpenAPI

关于视频点播

视频点播是集合视频上传、自动化转码处理、高效云剪辑、媒体资源管理、分发加速、视频播放于一体的音视频一条龙服务。

账号与授权

访问控制（RAM）

RAM用户就是由阿里云主账户创建的，每个RAM用户都有一个AccessKey。RAM用户和角色可以类比为个人和其身份的关系，一个人在拥有一个身份的时候，便对应的获取了相对应的权限。
授权策略：使用语法结构描述一组权限，他可以精确的描述被授权的资源集，操作集以及授权条件。通过授权策略，就可以给用户或者用户组附加授权，决定他们是否拥有上传、播放的权限。

上传

关于控制台上传和PC端上传工具，就不多做记录。主要记录一下开发上传的情景。

上传SDK

支持客户端：安卓、ios、小程序、Web
支持功能：

• 支持本地文件上传、URL上传、短视频SDK录制上传、同时上传多个文件
• 支持选择默认存储地址和更改地址
• 支持媒体资源管理，如视频标题、视频封面、字幕等
• 音视频转码
• 上传控制：支持开始、停止、暂停、断点续传
• 事件通知
• 上传授权
• 上传加速
• 网络切换，3g/4g/wifi

上传流程

1. 用户在服务端部署授权服务用于获取上传凭证（uploadAuth）和上传地址（uploadAddress）
2. 客户端向服务端发送请求获取上传凭证（uploadAuth）和上传地址（uploadAddress）
3. 服务器向第三方发送请求获取上传地址和上传凭证
4. 第三方服务返回上传地址和上传凭证
5. 服务器向客户端下发上传地址和上传凭证和VideoId即媒体ID。
6. 客户端使用上传地址和上传凭证初始化上传实例
7. 客户端构造上传参数发起请求
8. OSS服务返回上传结果

脚本下载：

<!--  IE需要es6-promise，目前支持IE 10及以上 -->
  <script src="../lib/es6-promise.min.js"></script>
  <script src="../lib/aliyun-oss-sdk-6.17.1.min.js"></script>
  <script src="../aliyun-upload-sdk-1.5.5.min.js"></script>

导入脚本之后，创建上传实例：

    // 初始化上传实例
    var uploader = new AliyunUpload.Vod({
        userId: "1039365228362275",
        // 上传到视频点播的地域，默认值为'cn-shanghai'，
        //eu-central-1，ap-southeast-1
        region: "",
        // 分片大小默认1 MB，不能小于100 KB（100*1024）
        partSize: 1048576,
        // 并行上传分片个数，默认5
        parallel: 5,
        // 网络原因失败时，重新上传次数，默认为3
        retryCount: 3,
        // 网络原因失败时，重新上传间隔时间，默认为2秒
        retryDuration: 2,
        // 开始上传
        'onUploadstarted': async function (uploadInfo: any) {
            console.log("开始上传", uploadInfo)
            let url = '';
            if (uploadInfo.videoId) {
                //如果uploadInfo.videoId存在，调用刷新音视频上传凭证接口,考虑断点续传情况
                const data: any = await refreshOSSData(uploadInfo.videoId)
                const res = data?.data?.data
                uploader.setUploadAuthAndAddress(uploadInfo, res.uploadAuth, res.uploadAddress);

            }
            else {
                //如果uploadInfo.videoId不存在，调用获取音视频上传地址和凭证接口
                const data: any = await getOSSData(uploadInfo?.file?.name)
                const res = data?.data?.data
                uploader.setUploadAuthAndAddress(uploadInfo, res.uploadAuth, res.uploadAddress, res.videoId);


            }



        },
        // 文件上传成功
        'onUploadSucceed': async function (uploadInfo: any) {
            console.log("上传成功", uploadInfo)
            setStatus(true)
            setVideo(uploadInfo.videoId)
            const res = await getPlayData("你的vid")
            console.log(res, "resss")
            setPlayer(new Aliplayer({
                id: 'J_prismPlayer',
                vid: "你的vid",//必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
                playauth: res?.data?.data?.playAuth,//必选参数。音视频播放凭证。
                width: "500px",
                preload: true,
                useH5Prism: true,
                definition: "FD,LD,SD,HD,OD,2K,4K"
            }, function (player: any) {
                // player.play();
                console.log('The player is created.')
            }))
        },
        // 文件上传失败
        'onUploadFailed': function (uploadInfo: any, code: any, message: any) {
            console.log("上传失败")

        },
        // 文件上传进度，单位：字节
        'onUploadProgress': function (uploadInfo: any, totalSize: any, loadedPercent: any) {
        },
        // 上传凭证或STS token超时
        'onUploadTokenExpired': async function (uploadInfo: any) {
            const data: any = await getOSSData(uploadInfo?.file?.name)
            const res = data?.data?.data
            uploader.resumeUploadWithAuth(res.uploadAuth);
        },
        // 全部文件上传结束
        'onUploadEnd': function (uploadInfo: any) {
            console.log("全部上传")

        }
    });

上传：

<input type="file" name="file" id="files" multiple onChange={(e: any) => {
                e.target.files.forEach((item: any) => {
                    uploader.addFile(item, null, null, null, '{"Vod":{}}');
                    uploader.startUpload();
                })

            }} />

播放

播放器SDK

以web播放器SDK为例，接入方式见官网
快速接入
https://help.aliyun.com/zh/vod/developer-reference/integration?spm=a2c4g.11186623.0.0.38ca433d83KtKH

ps：如果出现new Aliplayer()报错 cannot find name “xxx”,那就是需要配一个全局的d.ts

export {};
declare global {
    interface Window {
        Aliplayer: any;
    }
  }

播放流程（通过播放凭证播放）

先请求播放凭证，创建播放实例：

new Aliplayer({
                id: 'J_prismPlayer',
                vid: "你的vid",//必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
                playauth: res?.data?.data?.playAuth,//必选参数。音视频播放凭证。
                width: "500px",
                preload: true,
                useH5Prism: true,
                definition: "FD,LD,SD,HD,OD,2K,4K"
            }, function (player: any) {
                // player.play();
                console.log('The player is created.')
            })

更多使用场景以及API见官网阿里云视频点播

播放器皮肤设置