聊一聊阿里云播放器的一些坑

阿里云视频点播(ApsaraVideo for VoD)是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分发加速、视频播放于一体的一站式音视频点播解决方案。

视频点播服务构建在阿里云强大的基础设施服务之上,借助灵活和可伸缩的存储、高质量的视频转码处理技术,以及稳定快速的内容分发服务,帮助企业和开发者快速搭建安全、弹性、高可定制的点播平台和应用。


绪论

在最近的项目中,接触了切换视频源的问题,公司的视频源大概分布在乐视云,腾讯,优酷云,阿里云。因此,所用的播放器自然包括,优酷云播放器,腾讯外链播放,乐视云播放器,阿里云播放器。在众多播放器中,阿里云播放器是把我坑得最惨的一个。

aliplayer 之坑

公司采用的是 vid+playauth 进行身份验证:

认证代码过期(也就是 playauth 过期)

后端采用直接传入 vid 和 playauth,但是很遗憾,这样是导致认证代码过期,所以,需要先从后端获取 vid,再通过异步请求把 vid 传给后端,后端再向阿里云服务器请求 playauth 返回给前端,前端拿到 vid 和 playauth 进行初始化播放器

js 对视频封面不起作用

首先是高版本的阿里云播放器 js 对于封面貌似不起作用,如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var player = new Aliplayer(
{
id: 'player-con',
vid: $this.playLine.add,
playauth: res.msg.playAuth,
cover: res.msg.coverURL,
width: '100%',
height: '200px',
autoplay: false,
isLive: false,
rePlay: false,
playsinline: true,
controlBarVisibility: 'click',
showBarTime: 3000,
useH5Prism: true,
},

采用的是 ailiplayer 2.7.1 的 js 版本,结果是封面页不显示,只显示默认封面页。

降低版本为 2.3.1 则封面页正常

在微信中默认采用同层播放

阿里云播放器在微信或者 qq 浏览器中默认采用的是同层播放,如图:

这样会导致视频播放页面在同一层,在看视频的时候就不能对 dom 做任何操作(比如滑动,点击操作)。因此,如果你只是简单的想要播放视频,就需要在配置变量里加上x5_type: 'none',这项配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var player = new Aliplayer(
{
id: 'player-con',
vid: $this.playLine.add,
playauth: res.msg.playAuth,
cover: res.msg.coverURL,
width: '100%',
height: '200px',
autoplay: false,
isLive: false,
rePlay: false,
playsinline: true,
controlBarVisibility: 'click',
showBarTime: 3000,
useH5Prism: true,
x5_type: 'none',//微信会默认采用同层播放,会出现bug,所以需要禁止
},

这样就没有 x5-video-player-type 属性了,就不会出现同层播放。

但是这样 video 会被 x5 内核所劫持,展现的就是 x5 自带的播放器播放,其实这也影响不大,相对于同层播放展现出来的效果,我倒是更倾向与于被 x5 内核所劫持的那种方(le)式(qu)。

不能横屏显示

阿里云播放器对于 Android4.4.4 浏览器内核不能横屏显示,这一点官方也没有什么更好的办法,看来只有换 Android 系统