前提条件：
ビデオタグはビデオを伝送します。
発生した問題：
- WeChatの再生ボタンをクリックすると、自動的に全画面で再生されます。
- iOSの下のビデオのカバーは、最初のフレームを取得しません。PCとAndroidは正常です。
予想：
- WeChatで[再生]をクリックした後も、全画面表示ではなく、現在のページに表示されたままになります。。
- すべてのデバイスで、最初のフレームをポスターとして使用します。
解決策：最初の問題については、設定とプロパティ
を使用するのは簡単です。ラベルの書き方：webkit-playsinlineplaysinline
<video src="https://vjs.zencdn.net/v/oceans.mp4" playsinline="playsinline" webkit-playsinline="webkit-playsinline"></video>
または、js設定を使用します。
for(const video of document.querySelectorAll('video')) { //我这里有多个vedio标签
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.setAttribute('playsinline', 'playsinline');
video.setAttribute('muted', 'muted');
video.setAttribute('autoplay', 'autoplay');
setTimeout(() => video.pause(), 800);
video.append('您的浏览器不支持video播放');
}
2番目の問題の解決策に関して、上記のコードが示されています。
最初に、ビデオをサイレントモードに設定して、直接再生できるようにします。そうしないと、chromeなどの高バージョンの一部のブラウザは自動再生しか書き込みできず、自動再生を実現できません。 。その後、800ms遅延し、再生を一時停止して、最初のフレームの先頭でビデオがスタックし、カバーが正常に設定されるようにします。