Как воспроизводить видео только тогда, когда клавиша удерживается в HTML

Question

У меня есть код для нажатия клавиши, но мне нужно реализовать, где клавиша удерживается для воспроизведения видео

var vid = document.getElementById('myVideo');   
document.onkeypress = function(e){
    if((e || window.event).keyCode === 112){
        vid.paused ? vid.play() : vid.pause();

Я знаю, что должен использовать onkeydown и onkeyup, но не знаю, как

javascript html

1

Douglas Banks

Answer 1

const vid = document.getElementById('myVideo');

const playPauseVideo = ev => {
  if (ev.key !== 'F1') return; // Do nothing if not F1
  ev.preventDefault();         // Prevent browser default action (on F1)
  vid[ev.type === 'keydown' ? 'play' : 'pause']();
}

document.addEventListener('keydown', playPauseVideo);
document.addEventListener('keyup', playPauseVideo);

Press and hold F1 to play video
<video id="myVideo" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></video>

Answer 2

Вы можете использовать события keyup и keydown для воспроизведения и паузы вашего видео.

var vid = document.getElementById('myVideo');


document.onkeydown = function(e) {
  vid.play();
}

document.onkeyup = function(e) {
  vid.pause();
}

<video width="320" height="240" controls id="myVideo">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Как воспроизводить видео только тогда, когда клавиша удерживается в HTML

2 ответа

Новые вопросы

javascript