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

Question

我的网站上有视频标签，当我单击右箭头时，它会转发大约 1 分钟，我想将此时间减少到 10 秒。<video src="SOURCE" controls="true" id="video" style="height: 477px; width: 980px"></video>

Answer 1

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

  

  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 2

您可以在此箭头键上附加一个事件处理程序，然后更改 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 3

这可能会对您有所帮助。

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

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