[javascript] Video.js를 사용하여 동영상 플레이어에 키보드 단축키를 추가하는 방법은 무엇인가요?
document.addEventListener('DOMContentLoaded', function() {
var player = videojs('my-video');
// 플레이어에 키보드 이벤트 리스너 추가
document.addEventListener('keydown', function(event) {
// "P" 키를 누르면 재생/일시정지 토글
if (event.key === 'p') {
player.paused() ? player.play() : player.pause();
}
// "M" 키를 누르면 음소거/음소거 해제 토글
else if (event.key === 'm') {
player.muted(!player.muted());
}
// "F" 키를 누르면 전체 화면/일반 화면 토글
else if (event.key === 'f') {
player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen();
}
});
});
위의 코드에서는 DOMContentLoaded 이벤트와 keydown 이벤트 리스너를 사용하여 키보드 이벤트를 감지합니다. “P” 키를 누르면 동영상 재생/일시정지를 토글하고, “M” 키를 누르면 음소거/음소거 해제를 토글하며, “F” 키를 누르면 전체 화면/일반 화면을 토글합니다.
my-video
는 Video.js 플레이어의 ID이므로, 제공하는 플레이어 ID에 맞게 변경해야 합니다.
이제 Video.js 동영상 플레이어에 키보드 단축키를 추가할 수 있습니다. 더 많은 키보드 단축키를 추가하려면 위의 코드를 수정하거나 추가하면 됩니다.