H5 video标签,视频播放兼容安卓
<video src="images/aa.mp4" controls="controls">
<source src="images/aa.mp4" type="video/mp4">
</video>
controls是video的播放控件,在iOS下,添加播放控件controls="controls"
,就可以正常播放视频,但是在安卓下,播放控件的菜单加载出来是空白的,也就是说controls
属性在安卓下是失效的。
兼容安卓需要单独配置一套代码:
<video src="images/aa.mp4" controls="controls" v-if='nativeState'>
<source src="images/aa.mp4" type="video/mp4">
</video>
<video src="images/aa.mp4" id='videoPlay2' ref='videoPlay2' @click='videoBtn($event)' v-else>
<source :src="el.applicationVideo" type="video/mp4">
</video>
export default {
data () {
return {
nativeState:''
};
},
methods: {
videoBtn(e){
var video1 = e.srcElement
function requestFullScreen() { //全屏播放设置
if (video1.requestFullscreen) {
video1.requestFullscreen();
} else if (video1.mozRequestFullScreen) {
video1.mozRequestFullScreen();
} else if (video1.webkitRequestFullScreen) {
video1.webkitRequestFullScreen();
}
}
if(video1.paused){
video1.play();
requestFullScreen();
}else{
video1.pause();
}
}
},
mounted() {
var u = navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; //判断浏览器环境
this.nativeState = u;
}
注:如果点击播放按钮跳转了页面,有可能是设置全屏播放导致的。