video 经测试还不支持移动端自动播放的 vue-video-player也没办法

查了无数篇 归集下

1. 说设置autoplay的  (x)

2. 说使用vue-video-player(x)

3. 说vue-video-player组件第一次总是不能自动播放的原因是，视频或音频的url赋值时必须使用this.playerOptions.src方法来进行切源，而不是this.playerOptions.sources[0].src。 (x)

3. 说vue-video-player 安卓机 使用setTimeOut  然后去执行play (x)

还在苦苦查找的小伙伴别浪费时间了 查了两天无果。

 

归纳下我想要实现的效果 抖音那种。

1.视频区域播放

2.视频层级可被其他dom元素堆叠在上层

3.视频上所有自带控件隐藏

 

最终解决方案

1.区域播放: 只需设置video标签属性即可x5-playsinline="true" playsinline="true" webkit-playsinline="true"

2.层级问题 及 移除控件问题: 通过canvas进行替换播放即可

但是!! ios是可以正常播放

然后 安卓！！  如果不设置x5-video-player-type="h5" canvas是无法绘制出视频播放 加上了该属性 会导致安卓下重开一个层来播放 虽然可以播放 但是并不是在页面原先位置播放的

无奈啊！本来以为vue-video-player 可以解决自动播放但是大家去试试官网大神的demo就能知道 实际上在移动端还是无法自动播放 另外安卓下点播放也还是会重开一个层来播放视频。 

 

希望是我操作错了吧！ 如果有人可以实现 就直接评论留demo链接吧！ 上面那些方法都不行的。