Customized controls for video playback (Rewinding half speed and full speed)

video

#1

Hi everyone, I am new to Hype (think it is brilliant).

I am trying to have different scenes that contain a screen recording video (.mp4).

Is it possible using javascript to create two different buttons - one to rewind the video entirely…and the other to simply rewind back by 10 seconds?

These controls would be used across the whole project… applied to each new scene and the ‘main’ video being displayed… before the student clicks onto the next scene.

Any advice, suggestions and feedback would be appreciated.

Thanks


(Mark Hunte) #2

Here is an example to get you started.

The main scene for this example has two thumbnails linked to JS which switches the video being viewed and played.
I kept this in so you can see that this works on any video that is in the video element with the correct id.

You will see I have given the example a Play button. Which Plays + Pauses.

There are also two rewind buttons. < rewind - half speed and << rewind - full (normal ) speed

These buttons use the on mouse down to start an setInterval .
Continuing holding down a button will make the video scrub through. Releasing them will stop the rewind scrub.

The rewind buttons all have an id that is checked in the JS function to set the rewind speed.

There is also a 10s jump button that jumps back 10s. This simply jumps back without the setInterval.
And a [< jump to start button, which does just that.

The code is quite simple:

var thisSpeed;
var thisVid = hypeDocument.getElementById('video')
 if (element.id === "halfSpeed" ){ thisSpeed = .05} 
if (element.id === "fullSpeed" ){ thisSpeed = .1} 

if (element.id === "jump10" ){ 

 clearInterval(window.intervalRewind);
thisVid.currentTime += - 10;
				
				
				} else if (element.id === "toStart" ){
				
				thisVid.currentTime =0;
				
				} else {

window.intervalRewind = setInterval(function(){
      
       if(thisVid.currentTime == 0){
           clearInterval(window.intervalRewind);
           thisVid.pause();
       }
       else{
           thisVid.currentTime += - thisSpeed;
       }
                },30);


}

For each button there is also a JS run on mouse up to simply clear (stop) the setInterval.
The 10s just runs the clear setInterval within the on mouse click action.

video_Buttons_rewind.hype 2.zip (2.6 MB)


Video Controller Symbol
Creating Play & Pause Buttons for Video
Creating Play & Pause Buttons for Video
#3

Hi Mark, thank you very much for providing this.

Best wishes and hopefully I can return the favour at some stage.

TJR


(Mark Hunte) #4

Please see :


#5

Thanks!