手動で再生する
<video controls loop width="960" class="text-center">
<source src="/path/to/movies/1_video.mp4" type="video/mp4">
<p>※動画が表示されない際のメッセージ Download the<a href="/path/to/movies/0_video.mp4">MP4</a>video.</p>
</video>
<video controls loop width="960" class="text-center">
<source src="/path/to/movies/1_video.mp4" type="video/mp4">
<p>※動画が表示されない際のメッセージ Download the<a href="/path/to/movies/0_video.mp4">MP4</a>video.</p>
</video>
<video controls id="movie" src="/assets/movies/0_video.mp4" autoplay muted width="960" height="504"></video>
<hr>
<h3>再生する動画を選択</h3>
<div class="flex flex-center">
<p class="margin05"><button onclick="playVideo(1)">1 : Aパート ライト 5秒</button></p>
<p class="margin05"><button onclick="playVideo(2)">2 : Bパート リーフ 26秒</button></p>
<p class="margin05"><button onclick="playVideo(3)">3 : Cパート スカイ 9秒</button></p>
<p class="margin05"><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;
}
}