etiquetas de vídeo H5, player de vídeo compatíveis com o Android
<video src="images/aa.mp4" controls="controls">
<source src="images/aa.mp4" type="video/mp4">
</video>
controles é os controles de reprodução de vídeo em iOS, adicionar controles de reprodução controls="controls"
, você pode reproduzir vídeo normal, mas em Andrews, controles de reprodução carregar menu é em branco, que controls
propriedade em Andrews é o fracasso.
Andrews conjunto compatível de código precisa ser configurado separadamente:
<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;
}
Nota: Se você clicar no botão play para saltar de uma página, que pode ser devido a criação de reprodução em tela cheia.