Video.js: Add a skip 15 forward and backwards button to controlBar

[soljohnston777]

I have seen only on udemy where you can skip 15 seconds forward or backwards from your current position with a button with video.js. I have looked through hours of documentation and any kind of example I can find.

How can you implement this into just a regular web browser such as IE or Firefox like they are doing (I know you have mobile support)?

[misteroneill]

While this doesn't strike me as the sort of thing that we'd want to put in the video.js library itself (though we can certainly discuss that here), it definitely sounds useful and a great use case for a plugin! Maybe you'd like to take a stab at building one?

If so, check out the plugin generator project, which will give you everything you need to start building a plugin.

[mister-ben]

I have a plugin for this here: https://github.com/mister-ben/videojs-seek-buttons

[gkatsev]

You can use @mister-ben's plugin. If you wanted to do it yourself, you could either just create the button yourself using standard html, css, and javascript.
Or you could it similar to how @mister-ben is creating the button in his plugin: https://github.com/mister-ben/videojs-seek-buttons/blob/master/src/plugin.js#L73-L110. That's ES6 code but you can also do a similar thing in ES5 by using our extend helper method.

[gkatsev]

Hope that helps.
Thanks.

[soljohnston777]

Thank you for all your help. I mainly had seen so far a limited documentation on all this and some of the customizations to the menu bar. In Bootstrap they covered all the essentials with a tutorial faq, I was hoping to really see something on video.js because it is such a great script! Maybe you could add something to the main page with examples. If I knew more I would be willing to help on that project.

[apatinoyu]

Nice Player.
One question, may I create buttons before the videojs is ready?
So far I am doing like this:

video(videoId).ready(function(){
/*Creating buttons. /*
})

[anhari]

I think this feature is becoming more and more expected by users in video players across the board, so adding it to video.js library itself might be something to reconsider.

[Stefantut]

Or you can use this:
In html:

   <button data-skip="-15" class="player__button">« 15s</button>
   <button data-skip="15" class="player__button">15s »</button>

in JavaScript:

const skipButtons = player.querySelectorAll("[data-skip]");

function skip() {
  // used parseFloat to convert string to number
  video.currentTime += parseFloat(this.dataset.skip);
}
skipButtons.forEach((button) => button.addEventListener("click", skip));