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; }注:如果点击播放按钮跳转了页面,有可能是设置全屏播放导致的。