[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>
  • tech/jsvideo.txt
  • 上一次變更: 2022/10/16 22:37
  • jonathan