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