[Draft]練習 Javascript for Video [Jonathan's Wiki 筆記]

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== [Draft]練習 Javascript for Video ======
  * 需要一個可以撥放影片的網頁, 按下指定的熱鍵可以切換至指定的影片功能

===== 目前版本 =====
  * 預設開啟頁面可撥放 default.mp4
  * 按下鍵盤 B 撥放 videoB.mp4
  * 按下鍵盤 C 撥放 videoC.mp4
  * 按下鍵盤 D 撥放 videoD.mp4
  * 按下鍵盤 E 撥放 videoE.mp4
  * 按下鍵盤其他鍵撥放 default.mp4
<code javascript>

<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>
</code>

==== 尚待解決問題 ====
  * 自動撥放影片無法開啟聲音議題 - 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

{{tag>javascript video}}