vue 移动端video标签视频播放的解决方案

先讲我的问题吧

首先相信都遇到过 安卓手机在微信中播放视频 结束时被强制嵌入广告的问题吧。我反正是遇到过两次了。原因可能是因为安卓在微信里使用的是QQ浏览器吧。(这里我真的是不敢确定的哈,只是在qq浏览器里打开页面也是和微信打开的一样而已。)

 下面献丑的来说下我的情况和思路
首先我这边是在列表页里有个预告片。期初的想法是直接点击预告片就在当前页面利用video标签来播放。但是这样安卓和苹果手机的效果会大不相同而且 。 安卓手机 会给你添一堆的麻烦。
所以,重新建一个页面做为vieo页。以黑色做为背景 。模仿播放器播放效果。

为了能让安卓系统的手机能不在点击播放之后就-立刻全屏,可以给其添加一些。
特有的属性
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline
preload="auto" 

很惭愧这些属性我不全都知道 请自行百度一下。

但是加了这些属性之后,对苹果系统就有点不和谐了  首先是 没了默认的播放按钮没了
为了解决安卓的一系列问题我给屏蔽了。当然如果你想自己写播放按钮和进度条之类的话。
你就不需要判断是什么系统了直接就加上上面的东西  其他都自己写就好了。
 this.mobile = navigator.appVersion.indexOf('iPhone') !== -1 ? 'iPhone' :  'android' 

 我个人比较懒所以我是这么做的直接上我video的全部代码了不要笑,。。。





然后能实现的效果就是 :
在安卓端只要没有全屏播放就不会出现广告,然后播放结束和停止等等事件都可以拿到。可以做你想要的操作。我的就这样了。谢谢。
新手上路 ,不喜见谅。

你可能感兴趣的:(vue 移动端video标签视频播放的解决方案)