Sync Subtitles and Video

Using JavaScript with Hype
1

Hello!

I have had a lot of help from the forums and have figured out how to sync audio with subtitles and to have the audio autoplay. Now I need to figure out how to 1) have video autoplay on a scene and 2) sync video and subtitles (text) [so that when I pause video, subtitles pause. Or when I scrub video forward, the subtitles move with it. Or when I stop the video, the subtitles stop]

I have tried the following code but it isn’t working:

window.myVideo = hypeDocument.getElementById(‘testvideo’);
myVideo.addEventListener(‘timeupdate’, syncTimelines);
myVideo.play();

	function syncTimelines() {
		videoTime = myVideo.currentTime;
		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
		
		if (!myVideo.paused) {
	    hypeDocument.continueTimelineNamed('Main Timeline');
		}
		else if (myVideo.paused) {
		hypeDocument.pauseTimelineNamed('Main Timeline');    
		}

I tried the response on this thread, but it doesn’t work for video, for some reason:

Thank you in advance for all help!

^^ code from other thread Subtitles play connected to video play/pause

2

Hi Carey!

Seeing an example of your set-up would be useful - doesn’t have to be the full project - just an example snippet.

Possibly You have used the wrong location for the video element id. The above code is designed for the ID being placed in the innerHTML of the container holding the video (a rectangle) - not the “Unique Element ID” field in Hype’s Identity Inspector.

So using the code in your post just above above:
window.myVideo = hypeDocument.getElementById(‘testvideo’);

The ID in the video tag of the innerHTML of the video container would read:

<video id="testvideo" width="600" height="338" preload="auto" controls="">
      <source src="${resourcesFolderName}/prologue.m4v" type="video/mp4">
</video>

Using that same code You sited above - except my ID is different - here is a Demo.

Note: Additionally, this Demo does not have the “autoplay” in the code - i.e. “myVideo.play()”.
This is a demo from the thread You linked to above.

So the code does work for video - the question is why doesn’t it work in your project.

If my above conjecture about the wrong ID being used is not accurate then an example of yours would be most useful in solving your issue.