完成コード
ハマった点１）自動再生しない
ハマった点２）ビデオがフッタの下に表示された
参考記事
完成コード
<div class="top-video">
<video id='video' width="640" height="360" autoplay muted ></video>
<script type="text/javascript">
'use strict';
var playlist = [
'＜ビデオ１URL＞.mp4',
'＜ビデオ2URL＞.mp4',
'＜ビデオ3URL＞.mp4'
]
var video = document.getElementById('video');
video.muted = true;
video.autoplay = true;
video.style.width = '640';
video.style.height = '360';
video.controls = false;
video.src = playlist[0];
video.play();
var index = 0;
window.addEventListener('DOMContentLoaded', function(){
const videoElement = document.querySelector("video");
videoElement.muted = true;
videoElement.autoplay = true;
});
video.addEventListener('ended', function(){
index++;
if (index < playlist.length) {
video.src = playlist[index];
video.play();
}
else {
video.src = playlist[0];
video.play();
index = 0;
}
});
</script>
</div>
ハマった点１）自動再生しない
HTMLにautoplayを指定したのに自動再生しなかった
<video id='video' width="640" height="360" autoplay></video>
最近のブラウザでは、音声付き動画の自動再生が制限されているため
対策：
muted：無音声再生を指定すれば自動再生された
<video id='video' width="640" height="360" autoplay muted></video>
ハマった点２）ビデオがフッターの下に表示された
document.body.appendChild(video);
このコードのために、すべての要素の最後に回されていた
削除して普通にコンテンツ領域に表示
参考記事
https://gist.github.com/yoshiiz/6134482f8fd72063e7221b7b82d27e67
http://lifelog.main.jp/wordpress/?p=981
https://se.ekaki-j.com/html5-video/
↧