如何更改视频标签的转发时间

Question

我的网站上有视频标签，当我单击向右箭头时，它会向前转发约1分钟，我希望将此时间减少到10秒。

<video src="SOURCE" controls="true" id="video" style="height: 477px; width: 980px"></video>

Answer 1

您可以在此箭头键上附加事件处理程序，然后更改currentTime属性。但是，请避免以前的默认行为。

const $video = document.querySelector('video');
const handleKeyDown = (event) => {
  e.preventDefault();
  if (e.keyCode === 39) {
    const seconds = $video.currentTime;
    $video.currentTime = seconds + 10;
  }
}

$video.addEventListener('keydown', handleKeyDown);

<video width="320" height="200">
  <source src="your/file.mp4" type="video/mp4">
</video>

<p>Hello</p>

Answer 2

您可以将事件监听器直接附加到视频而不是网站上。

  
  var video = document.getElementById("video");
  var timer = 10;
  video.addEventListener('keydown', (e) => {
   event.preventDefault();
   switch (event.keyCode) {
         case 37:  
              var currentTime = video.currentTime;
              video.currentTime = currentTime - timer;
            break;
         
         case 39:
               var currentTime = video.currentTime;
              video.currentTime = currentTime + timer;
            break;
            }
});

 <video controls="true" id="video" style="height: 477px; width: 480px">
   <source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
 </video>
 

Answer 3

这可能会对您有所帮助。

• https://www.codespeedy.com/forward-and-backward-html5-video-player-javascript/

您可以使用event.preventDefault（）阻止默认转发，并通过添加currentTime + 10秒来设置手动转发。