[Draft]練習 Javascript for Video

• 需要一個可以撥放影片的網頁, 按下指定的熱鍵可以切換至指定的影片功能

• 預設開啟頁面可撥放 default.mp4
• 按下鍵盤 B 撥放 videoB.mp4
• 按下鍵盤 C 撥放 videoC.mp4
• 按下鍵盤 D 撥放 videoD.mp4
• 按下鍵盤 E 撥放 videoE.mp4
• 按下鍵盤其他鍵撥放 default.mp4

<video id="myVideo" src=""></video>
 
 
<script>
var myVideo = document.getElementById("myVideo");
 
playVideo();
 
function playVideo(videoId) {
	myVideo.controls = true;
	myVideo.autoplay = true;
	myVideo.muted = true;
 
	console.log("Key:"+videoId);
	if (videoId == "KeyB") {
		console.log("KeyB");
		myVideo.loop = false;
		myVideo.src = "videoB.mp4";
	}
	else if (videoId == "KeyC") {
		console.log("KeyC");
		myVideo.loop = false;
		myVideo.src = "videoC.mp4";
	}
	else if (videoId == "KeyD") {
		console.log("KeyD");
		myVideo.loop = false;
		myVideo.src = "videoD.mp4";
	}
	else if (videoId == "KeyE") {
		console.log("KeyE");
		myVideo.loop = false;
		myVideo.src = "videoE.mp4";
	}
	else {
		myVideo.loop = true;
		myVideo.src = "default.mp4";
	}
 
	myVideo.load();
	return;
}
 
window.addEventListener("keydown", function(event) {
  if (event.defaultPrevented) {
    return;
  }
  playVideo(event.code);
  event.preventDefault();
}, true);
 
</script>

• 自動撥放影片無法開啟聲音議題 - https://developer.chrome.com/blog/autoplay/
• 其他影片撥放完成後可以繼續撥放預設影片

• https://www.section.io/engineering-education/keyboard-events-in-javascript/
• https://www.w3schools.com/jsref/prop_video_controls.asp
• https://www.w3schools.com/js/js_if_else.asp