vídeo compatível com leitor de vídeo Android

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 controlspropriedade 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.

Publicado 27 artigos originais · ganhou elogios 21 · vista 4607

Acho que você gosta

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