Androidのビデオプレーヤー互換性のあるビデオ

アンドロイドと互換性のH5ビデオラベル、ビデオプレーヤー

<video src="images/aa.mp4"  controls="controls">
    <source  src="images/aa.mp4"  type="video/mp4">
 </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;
  }
  

注:あなたがページをジャンプする再生ボタンをクリックすると、フルスクリーン再生を設定することが原因の可能性があります。

公開された27元の記事 ウォン称賛21 ビュー4607

おすすめ

転載: blog.csdn.net/weixin_43997143/article/details/102857012