vue 移动端video标签视频播放的解决方案
先讲我的问题吧首先相信都遇到过 安卓手机在微信中播放视频结束时被强制嵌入广告的问题吧。我反正是遇到过两次了。原因可能是因为安卓在微信里使用的是QQ浏览器吧。(这里我真的是不敢确定的哈,只是在qq浏览器里打开页面也是和微信打开的一样而已。)下面献丑的来说下我的情况和思路首先我这边是在列表页里有个预告片。期初的想法是直接点击预告片就在当前页面利用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的全部代码了不要笑,。。。
<template>
<div class="_contenter flex_center">
<div class="videoBox">
<video v-if="mobile=='android'" id="video"
width="100%"
height="100%"
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline
preload="auto"
poster="xx0.jpg"
src="xx.mp4" >
</video>
<video v-if="mobile=='iPhone'" id="video"
width="100%"
height="100%"
poster="xx0.jpg"
src="xx.mp4" >
</video>
<div v-show="show" @click="play" style="color: #fff;" class="play mask flex_center">
<img class="playBtn " src="../../images/play.png"/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show:true,
mobile:"",
text:"",
}
},
created(){
this.text=navigator.appVersion
this.mobile = navigator.appVersion.indexOf('iPhone') !== -1 ? 'iPhone' : 'android'
},
mounted(){
var that = this
let video = document.getElementById('video')
},
methods: {
play(){
video.play();
this.show = false
},
},
computed: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
._contenter{
height: 100%;
background: #000;
.videoBox{
position: relative;
width: 100%;
.play{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
}
}
.playBtn{
width: 45px;
}
</style>
然后能实现的效果就是 :
在安卓端只要没有全屏播放就不会出现广告,然后播放结束和停止等等事件都可以拿到。可以做你想要的操作。我的就这样了。谢谢。
新手上路 ,不喜见谅。
更多推荐
已为社区贡献1条内容
所有评论(0)