videoタグで再生のタイミングを調整したい場合


Warning: Undefined variable $more_link_text in /home/croquis/croquis.cc/public_html/cc/wp-content/themes/croquis/index.php on line 18

Warning: Undefined variable $stripteaser in /home/croquis/croquis.cc/public_html/cc/wp-content/themes/croquis/index.php on line 18

HTMLは下記で

<video id=”mainvideo” loop preload=”auto” muted=”muted” volume=”0″ playsinline poster=”代替画像”><source src=”/move.mp4″ type=”video/mp4″></video>

あとはJavaScriptで、

document.addEventListener(‘DOMContentLoaded’, function() {
var mainVideo = document.getElementById(‘mainvideo’);
setTimeout(function() {
mainVideo.play();
}, 3000); // 3000ミリ秒 = 3秒
});

と記述します。

オート再生とループ再生にも対応。

※追記:iPhoneでは「playsinline」の記述が必要のようです。

2024.02.01BACK