Play và Pause video bằng phím space sử dụng JavaScript

Play và Pause video bằng phím space sử dụng JavaScript

Để làm được điều này, ta sẽ sử dụng một trình lắng nghe sự kiện của JavaScript để phát hiện nút space khi nó được nhấn bởi người dùng, đó là sự kiệnonkeydown và thông qua sự kiện này để bắt keyCode của phím được nhấn, thông qua keyCode ta xác định phím đó là phím gì, và ở đây, phím space có keyCode là 32
Ví dụ sau đây sẽ giúp các ông hiểu rõ hơn về việc này và từ đó xây dựng mã code của riêng mình.

Tui có mã HTML là đoạn code sau:

<video id='video'>
     <source src="https://cdn.jsdelivr.net/gh/truong-huong/-media/video-background.mp4" type="video/mp4">
</video>

Đoạn JavaScript sau sẽ điều khiển phát và dừng video:

function playPauseVideo() {
	var myVideo = document.getElementById('video');
	if (myVideo.paused) {
	  myVideo.play();
	}
	else { 
	  myVideo.pause(); 
	}
}

Và mã JavaScriptdùng để bắt keyCode của phím là đoạn code sau:

document.onkeydown = function(event) {
	var key = event.which || event.keyCode;
    if (key == 32) {
       event.preventDefault();
       playPauseVideo();
    }
};

hoặc

document.onkeydown = function(event) {
    switch (event.keyCode) {
       case 32:
            event.preventDefault();
            playPauseVideo();
          break;
    }
};

Và kết quảsau khi chạy các đoạn code trên:
Như vậy là xong bài play và pause video bằng JavaScript😋