CODEWITHSUNDEEP
javascripthtmlvideo
Shota Topchishvili
Shota Topchishvili

Reputation: 232

How to change video tag's forwarding time

I have video tag on my website and when i click right arrow, it forwards with about 1 minute and i want to reduce this time to 10 seconds.

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

Upvotes: 2

Views: 978

Answers (3)

arkhz
arkhz

Reputation: 291

You can attach an eventlistener directly to the video instead of the site. 

  
  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>

Upvotes: 2

Yash Sartanpara
Yash Sartanpara

Reputation: 86

This may help you.

You can use event.preventDefault() to prevent default forwarding and set manual forward by adding currentTime + 10 seconds.

Upvotes: 0

manoi
manoi

Reputation: 798

you can attach an event handler on this arrow key and then change the currentTime property. But prevent the default behaviour before.

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>

Upvotes: 1

Related Questions