CODEWITHSUNDEEP
javascripthtmlvideohtml5-videokeyboard-shortcuts
turmeric
turmeric

Reputation: 543

How can you override default browser HTML5 video controls?

I'm trying to change the custom shortcuts of a video player to those of Youtube. On Youtube the arrow keys rewind and fast forward 5 seconds each. By default on Firefox and Google, when the left arrow key is pressed the video is rewound by 15 seconds, when the right arrow key is pressed the video is fast forwarded by 15 seconds. I'd like to get it to be 5 seconds. I've tried using e.preventDefault() to no avail. I have the same issue with the space bar.

Any ideas on how to make this happen?

Current Code:

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

Thanks

Upvotes: 4

Views: 7597

Answers (5)

uwe
uwe

Reputation: 4077

I forward the video similar to the other examples (video.currentTime += 5;) However, when the video player has focus it would jump by a different amount. It used to be 1 min and now is 7.5 seconds (using Chrome).

However, using a document.activeElement.blur(); would remove the focus from the video player and made it jump by 5 seconds again

Upvotes: 0

fxmarty
fxmarty

Reputation: 81

I think zer00ne solution is not working as it is not overriding the default forward/backward time of youtube of 5 seconds (at least for me, be it with Firefox or Chrome). In fact, I think his solution simply adds 5 seconds to the 5 seconds by default.

I have tried to find a better solution but even with this code

window.onkeydown = vidCtrl;

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

the current time returned is the one after the default behavior of forward/backward of 5 seconds has happened. I do not really understand.

Edit: Looks like the problem is the same here: JavaScript - Prevent default in html5 video tag while fullscreen

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

From what is provided in OP code it looks like it should work. The only way it wouldn't is that video is null. event.key should probably be event.code. Of course that event.preventDefault() doesn't help nor hinder...or it helps in the fact if the arrow keys default behavior interfered somehow...can't really see how in your situation though.

Demo

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>

Upvotes: 5

UnReal G
UnReal G

Reputation: 136

First of all, you should check if controls on your video element are disabled in your HTML document. 

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

if that is disabled, and still not working for you, you could try using JQuery to solve the problem by using:

<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);
}

Upvotes: 0

Adeel Tahir
Adeel Tahir

Reputation: 203

Hope this helps.It will override left and right keys and seek video to given number.

<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>

Upvotes: 0

Related Questions