de vídeo compatible con reproductor de vídeo Android

etiquetas de vídeo H5, reproductor de vídeo compatible con Android

<video src="images/aa.mp4"  controls="controls">
    <source  src="images/aa.mp4"  type="video/mp4">
 </video>

los controles son los controles de reproducción de vídeo en iOS, añadir controles de reproducción controls="controls", puede reproducir vídeo normal, pero en Andrews, controles de reproducción se cargan menú está en blanco, que controlsla propiedad en Andrews es el fracaso.

Andrews conjunto compatible de código necesita ser configurado por separado:

<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: Si hace clic en el botón de reproducción para saltar una página, puede ser debido fijar la reproducción a pantalla completa.

Publicado 27 artículos originales · ganado elogios 21 · vistas 4607

Supongo que te gusta

Origin blog.csdn.net/weixin_43997143/article/details/102857012
Recomendado
Clasificación