Android video player compatible video

H5 video labels, video player compatible with Android

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

controls is the video playback controls in iOS, add playback controls controls="controls", you can play video normal, but in Andrews, playback controls load up menu is blank, that controlsproperty in Andrews is failure.

Andrews compatible set of code needs to be configured separately:

<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;
  }
  

Note: If you click on the play button to jump a page, it may be due to set up full-screen playback.