Vueのビデオプラグインを使用したWeChatブラウザでビデオが自動再生できない問題

vueのビデオプラグインを使用したWeChatブラウザでビデオが自動再生できない問題(解決済み)

vue で h5 を書いているときに要件が発生し、ページの背景がビデオに設定されていたため、video.js プラグインを使用しましたが、最終的に WeChat でスタックしてビデオが自動再生できなくなりました。インターネットはすべて同じコピー&ペーストでしたが、少し使用して、5、6時間後にようやく問題が解決しました、実際、実装方法はインターネットほど複雑ではなく、もうナンセンスではなく、コードをアップロードするだけです。
注: 一部の属性は必要かどうかをテストする時間がありません。テスト結果に応じて自分で削除できます。

テストマシン: Android Huawei p30、ios はまだテストされていませんが、インターネットに従って ios を設定することをお勧めします。また、次のコードも互換性があるように設定されています。

 //下载好插件不用再去搞什么子路由,直接在需要插入视频的地方插入video标签
  <video
         webkit-playsinline="true"
          x-webkit-airplay="true" 
          playsinline="true" 
         x5-video-player-type="h5"
         x5-video-player-fullscreen="true" 
         width="100%" 
         height="100%"
          id="example_video" 
          class="video-js " 
          preload='auto'
          autoplay='true'
          loop
          muted
          poster="../assets/video/01.jpg"
          >
          //src就是你的视频地址,我这里是需要每次进入页面随机切换背景视频,所以用了计算属性
	        <source :src="dd.src" type="video/mp4">
    </video>
    

js

  mounted(){
  //视频自动播放
  this.$nextTick(()=>{
    var video = document.getElementById("example_video");
      video.play();
  }),
    destroyed(){
  // this.videoPlayer.dispose(); //销毁video
  //或者重置video
   this.$nextTick(()=>{
    var video = document.getElementById("example_video");
      video.reset();
})
}

はい、そのとおりです。とてもシンプルで、オンラインで何かを入手するほど複雑ではありません。すべてを試した結果、問題は作成されたツールで直接解決できることが最終的にわかりました。

おすすめ

転載: blog.csdn.net/JLX981314/article/details/126111883