Как можно переопределить элементы управления видео HTML5 в браузере по умолчанию?

Question

Я пытаюсь заменить собственные ярлыки видеоплеера на ярлыки Youtube. На Youtube клавиши со стрелками перематывают назад и вперед на 5 секунд каждая. По умолчанию в Firefox и Google, когда нажата клавиша со стрелкой влево, видео перематывается на 15 секунд, когда нажата клавиша со стрелкой вправо, видео быстро перематывается на 15 секунд. Я бы хотел, чтобы это было 5 секунд. Я пробовал использовать e.preventDefault () безрезультатно. У меня такая же проблема с пробелом.

Есть идеи, как это сделать?

Текущий код:

window.addEventListener('keydown', function (event) {
if (event.key === "ArrowLeft") {
        event.preventDefault();
        video.currentTime -= 5;
} else if (event.key === "ArrowRight") {
        event.preventDefault();
        video.currentTime += 5;
        }
});

Спасибо

Answer 1

Судя по тому, что предоставлено в коде OP, похоже, что он должен работать. Единственный способ этого не сделать - это то, что video имеет значение null. event.key, вероятно, должно быть event.code. Конечно, это event.preventDefault() не помогает и не мешает ... или это помогает в том, что если поведение клавиш со стрелками по умолчанию каким-то образом вмешалось ... хотя не могу понять, как в вашей ситуации.

---

Демо

window.onkeydown = vidCtrl;

function vidCtrl(e) {
  const vid = document.querySelector('video');
  const key = e.code;

  if (key === 'ArrowLeft') {
    vid.currentTime -= 5;
    if (vid.currentTime < 0) {
      vid.pause();
      vid.currentTime = 0;
    }
  } else if (key === 'ArrowRight') {
    vid.currentTime += 5;
    if (vid.currentTime > vid.duration) {
      vid.pause();
      vid.currentTime = 0;
    }
  } else if (key === 'Space') {
    if (vid.paused || vid.ended) {
      vid.play();
    } else {
      vid.pause();
    }
  }
}

video {
  display: block;
  width: 320px;
  margin: 15px auto;
}

<video src='https://glsec.s3.amazonaws.com/mp4/60s.mp4'></video>

Answer 2

Я думаю, что решение zer00ne не работает, поскольку оно не отменяет установленное по умолчанию время перехода вперед / назад для YouTube, равное 5 секундам (по крайней мере, для меня, будь то Firefox или Chrome). На самом деле, я думаю, что его решение просто добавляет 5 секунд к 5 секундам по умолчанию.

Я пытался найти лучшее решение, но даже с этим кодом

window.onkeydown = vidCtrl;

function vidCtrl(e) {
  e.preventDefault();
  const vid = document.querySelector('video');
  const timeCurrent = vid.currentTime
  console.log(timeCurrent);
}

возвращено текущее время после того, как произошло поведение по умолчанию вперед / назад на 5 секунд. Я не совсем понимаю.

Edit: Похоже, проблема здесь такая же: JavaScript - Запретить по умолчанию в теге html5 видео в полноэкранном режиме

Answer 3

Надеюсь, это поможет. Он переопределит левую и правую клавиши и будет искать видео по заданному номеру.

<script>
var video = document.querySelector('video'); //video element
window.addEventListener('keydown', function (event) {
if (event.keyCode  === 37) { 
        //Left
        video.currentTime -= 10;
} else if (event.keyCode === 39) { 
        //Right
        video.currentTime += 10;
        }
});
</script>

Answer 4

Прежде всего, вы должны проверить, отключены ли элементы управления для вашего видеоэлемента в вашем HTML документе.

<video *controls* width="250">  Remove *controls*

, если он отключен и по-прежнему не работает для вас, вы можете попробовать использовать JQuery для решения проблемы, используя:

<video id="video" type="video/mp4" src="./video.mp4" autoplay></video>

var vid = document.getElementById("video");

$(window).keydown(function(e) {
  if (e.which == 32) {
    e.preventDefault();
    if (video.paused) {
      playVideo();
    }else {
      pauseVideo();
    }
  }else if(e.which == 39){
    skipForward();
  }else if(e.which == 37){
    skipBackward();
  }
});

function skipForward() {
  vid.currentTime += 10.0;

  $("#skip_forward_visual").removeClass("v_hidden");  // Visual Indicator

  setTimeout(function() {
    $("#skip_forward_visual").addClass("v_hidden");
  }, 400);
}

function skipBackward(){
  vid.currentTime -= 10.0;

  $("#skip_backward_visual").removeClass("v_hidden"); // Visual Indicator

  setTimeout(function() {
    $("#skip_backward_visual").addClass("v_hidden");
  }, 400);
}