Create buttons to jump to MP4 chapter points or times in a video

I’m trying to control playback of a MP4 video in a scene with a menu of buttons that would link to jump points in the video. or at least buttons to jump the video to a particular playback timecode.

Is this possible in Hype 3 Pro?

Thanks so much!

Hey Joe, @heyjoe

If you use javascript and the “currentTime” property you can set the … current time of the video.

Also you can use the “time update” function too which apparently is a little more accurate.

D

To jump to 3 seconds, you would first need to give your video an element ID in ‘Identity Inspector’. In the example below I use MyVideo

//get the id of the video
var mediaElement = document.getElementById("MyVideo");  
 
// go to 3 seconds:  
mediaElement.currentTime = 3;

This function might also be useful. If a video is played, it will resume playback:

// If the element is paused, resume playback: 
if (mediaElement.paused); {
  mediaElement.play(); 
else {
  mediaElement.pause(); 
};

Thank you both. I’m back in my office and working on this project again and your suggestions seem to work well for me, even on the iPad version, although it isn’t quite as exact as I’d like. I have 3 15-minute training videos in one interface with 6 jump points each and this is very helpful.

Not that I’m lazy, but it would be awesome to have some form of media control built in to the button options in a future version of Hype. I’m so used to using trigger points in F4V files that it would be beyond awesome to be able to simply use a button to request an MP4 chapter marker as a playback jump point. I do about 8 tutorial systems a year for clients, some of which can contain as many as 130 videos. I’m needing to migrate to HTML5 and Hype seems fantastic so far, but I know less than zero about javascript and the like. Clearly it’s time for me to learn something new!

Thanks again.

Joe

1 Like

Hi

I used this code and it worked. When pressing a button the video jumps to a specified time and plays automatically.

var vid = document.getElementById(“video”);
vid.currentTime = 3;
vid.play();

However, when playback is over, pressing the button only takes me to a specified time but doesn’t play the video. Would the second function you provided fix this problem. I tried to include it in the code but it didn’t work.

Any ideas?

Thanks
Greg

Hi Greg!

The code should work as stated - perhaps something else is interfering. Posting an example of your project might help resolve your issue(s).

Attached is a Hype project utilizing the essence of Daniel’s code: VidDemo_JHSv1.hype.zip (1.1 MB)

Demo here.
Note: mp4 video only, no ogg~webM version.


The PlayPause function:

var vid = document.getElementById("video");	
	if (element.innerHTML=="Play") {
		element.innerHTML="Pause";
		vid.play();
		}
	else if (element.innerHTML=="Pause") {
		element.innerHTML="Play";
		vid.pause();
		}

_Note: The "innerHTML" in the code above is for changing the button's text from "Play" to "Pause" and vice-versa triggering the corresponding "Play~Pause" action._

The goToVidTime function:

var vid = document.getElementById("video");
vid.currentTime = 14;	
vid.play();

I tried this code for iframe youtube but not work.
Can you show me the way to do that?
Thank you so much.

Hi,

Please have a look at this post and see if it helps.

If not let us know but with more specific info of your setup, example project file and what is not working