web-dev-qa-db-ja.com

HTML5ビデオの自動再生、ただし5秒の遅延

Webページの背景として20秒の長いHTML5ビデオループがあり、自動起動に設定されています。ビデオの自動再生を5秒間遅らせることはできますか？ビデオを完全にロードしてから再生しようとすると、ビデオが途切れることを防ぐことができます。これが私の現在のコードです：

<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="videos/backgroundvideo.mp4" type="video/mp4"> 
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>

どんな助けでも大歓迎です!!

htmlvideosettimeoutpreloadautoplay
12
Billy

HTML：

<video id="myVideo" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">

JavaScript：

setTimeout(function(){
  document.getElementById("myVideo").play();
}, 5000);

JSFiddleの例 。

17
Drew Beres

これは私にとって実用的なソリューションです。ブラウザが確実にビデオを再生できるようにするには、ベストプラクティスとしてcanplayを使用する必要があります。また、これはまっすぐなjavascriptソリューションです。

注：自動再生と余分な終了動画タグを削除し、ミュートとループのフラグをフォーマットしました。

var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
  setTimeout(function() {
    video.play();
  }, 5000);
});
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
  <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
    <source src="videos/backgroundvideo.webm" type="video/webm">
</video>
4
Joe Johnston