ムービーを再生する

<video controls loop>
	<source src="/Path/to/movies/1_video.mp4" type="video/mp4">
	<p>※動画が表示されない際のメッセージ Download the<a href="/assets/movies/0_video.mp4">MP4</a>video.</p>
</video>

video {
	display: block;
	margin: 2rem auto;
	width: 90%;
	}

再生する動画を選択

何も操作しなければそのまま全編が連続再生されるが、一度どれか動画を選択再生すると、選択した動画再生終了と共に停止する。

<video controls id="movie" src="/Path/to/movies/0_video.mp4" autoplay muted></video>
	<div class="flex flex-center">
	<p><button onclick="playVideo(1)">1 : Aパート ライト ５秒</button></p>
	<p><button onclick="playVideo(2)">2 : Bパート リーフ 26秒</button></p>
	<p><button onclick="playVideo(3)">3 : Cパート スカイ 9秒</button></p>
	<p><button onclick="playVideo(4)">4 : Dパート ミルキーウェイ 12秒</button></p>
	</div>

function playVideo(num) {
	console.log(num);
	tag = document.getElementById("movie");
	switch (num) {
		case 1:
			tag.src = "/path/to/movies/1_video.mp4";
			break;
		case 2:
			tag.src = "/path/to/movies/2_video.mp4";
			break;
		case 3:
			tag.src = "/path/to/movies/3_video.mp4";
			break;
		case 4:
			tag.src = "/path/to/movies/4_video.mp4";
			break;
	}
}