美文网首页前端之美-VueJs
vue 对接阿里云视频点播服务——web播放

vue 对接阿里云视频点播服务——web播放

作者: 道翼 | 来源:发表于2018-09-03 12:01 被阅读228次

    项目现在是在pc端做播放服务,所以只接入了web端播放

    大概流程是:

    1.index.html中加入播放器js文件链接

    1.获取本地存储的视频id

    2.获取播放凭证(通过后端或是api接口,api需携带好公共参数)

    3.使用播放器sdk进行播放

    首先,需要绑定cname域名,获取加速域名用于视频播放,阿里有文档,根据文档走就可以,需要注意的式,cname绑定的域名需要做一个二级域名用来绑定,www的主域名解析更改后会造成网站访问出错

    然后就是视频加密这里了,阿里云提供  视频加密HLS标准加密,当时不懂,所以打电话给阿里的工程师,感谢阿里的不知名工程师

    视频加密:阿里云自己的加密,需要用阿里云的播放器sdk,视频播放有h5和flash播放,这里加密播放需要用flash播放器,这里需要在控制台转码设置里面设置加密(可以看一下官方文档对于加密的解释)

     HLS标准加密:阿里工程师说是和网上一样的HLS加密,这里需要联系点播后台,设置一个帐号(具体可以看一下官方文档)

    我用的是阿里云的视频加密,当时阿里云小哥说阿里云的视频哪怕被抓包也只能在阿里云播放器播放,而且需要通过AK和视频id获取凭证,这样安全方面是有保障的

    接下来就是视频播放,我贴一下我的代码:

    引入index.html,使用阿里提供的链接,上面三个是视频上传js 阿里云官方文档复制或者自己写一个div,class名固定,id名可变 定义全局变量

    这里要先获取播放凭证和视频id,然后new出播放器对象,生成阿里云播放器,new出的对象 id 对应 html 的 id,我在这里用的加密播放,如果是 h5 把  format 和  useFlashPrism禁掉就可以

    这就是视频播放了。

    相关文章

      网友评论

        本文标题:vue 对接阿里云视频点播服务——web播放

        本文链接:https://www.haomeiwen.com/subject/oqhbwftx.html