How can you make Video.JS skip forwards and backwards 15 seconds?

Question

The Play pause button works for HTML5 video and this Video.JS. I am not sure why the other functions don't work for video.js, even though they work for HTML5 video?

What can I do to make video JS skip forward and backwards 15 seconds? Also, for some weird reason the video won't change size either.

    <div id="instructions">
      <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
          controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
          data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
        <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
      </video>
      <button onclick="playPause()">Play/Pause</button>  
      <button onclick="makeBig()">Big</button>
      <button onclick="makeSmall()">Small</button>
      <button onclick="makeNormal()">Normal</button>
      <button onclick="restart();">Restart</button> 
      <button onclick="skip(-10)">Rewind</button>
      <button onclick="skip(10)">Fastforward</button>
    </div>

    <script> 
    //controls for video.js HTML5 video player
    var myVideo = document.getElementById("my_video_1"); 

    function playPause() { 
        if (myVideo.paused) 
            myVideo.play(); 
        else 
            myVideo.pause(); 
    } 

    function makeBig() { 
        myVideo.width = 560; 
    } 

    function makeSmall() { 
        myVideo.width = 320; 
    } 

    function makeNormal() { 
        myVideo.width = 420; 
    } 

     function skip(value) {
            var video = document.getElementById("my_video_1");
            video.currentTime += value;
     }    

     function restart() {
            var video = document.getElementById("my_video_1");
            video.currentTime = 0;
        }

     </script>

http://codepen.io/soljohnston777/pen/rLKjvQ I tried it on here and it doesn't go... on my local server though the created play/pause works but nothing else, except video.js's own css template of buttons — , Jul 27 '16 at 05:09
What normally would be the video.js way of making this work? — , Jul 27 '16 at 05:13
What is issue at `javascript`, rendering of `html` at http://plnkr.co/edit/z5fXqYosypuGNJVcfiPE?p=preview? — guest271314, Jul 27 '16 at 05:39

score 13 · Answer 1 · answered Mar 03 '17 at 08:26

13

it's a bit late but i use currentTime like this:

var video = videojs($("#player_id"));
video.currentTime(video.currentTime() + 10);

Hope this will help.

answered Mar 03 '17 at 08:26

Alex

151
1
5

Barış Can Yılmaz · Answer 2 · 2021-11-06T17:18:25.880

6

const video=document.getElementById("videoId");

forward=()=>{
  skip(15);
}

backward=()=>{
   skip(-15);
}

skip=(time)=>{
  video.currentTime=video.currentTime+time;
}

For contorlling with arrow keys

document.addEventListener("keydown",(e)=>{
    if(e.keyCode==37){       //left arrow
        backward()
    }else if(e.keyCode==39){ //right arrow
        forward()
    }
  }
)

edited Nov 06 '21 at 17:18

answered May 28 '21 at 12:27

Barış Can Yılmaz

683
10
21

score 3 · Answer 3 · answered Nov 07 '18 at 21:04

3

seek(secs) {
  let time = this.player.currentTime() + secs;

  if (time < 0) {
    time = 0;
  }

  this.player.currentTime(time);
},

forward() {
  this.seek(10);
},

rewind() {
  this.seek(-10);
},

answered Nov 07 '18 at 21:04

chovy

72,281
52
227
295

How can you make Video.JS skip forwards and backwards 15 seconds?

3 Answers3