Switching between videos while playing

Hi there. I’m fairly new to Hype, so please bear with me if this is very easy to do.

I’m working on a project where I have a video (mp4-file) of a guy riding a bike where the user can click a button somewhere on the page to take off the riders bike helmet.
The two videos are identical except that the guy is wearing a helmet in one video (video1) and not wearing it in the other video (video2).

How would you guys do this?

Is it possible to start the two videos simultaneously and just switch the visibility of the videos when the user clicks the button?

What do you think? Any help will be greatly appreciated. Thanks :slight_smile:

Here's a teeny bit of help...

This is theoretical, as I'm using my iPad right now. I'm thinking you could use JavaScript to synchronize the two videos... grab the time from one video and then set it to the time of the other video when it's played.

You might be facing some technical limitations though, as that won't work on devices that don't play the video on the page. Additionally, videos can be large. Two playing at the same time could run into performance issues. Even just loading two videos could be a problem.

Another approach would be to not use video, but still frames. I tried that with Annoyed Tomatoes... Annoyed Tomatoes – Photics.com ...and that made the project quite large. But if it is truly exactly the same, except for the head of the driver, then small square of animation can be layered above the full video. That should... theoretically... save some storage space.

I'm not sure if these ideas will work, but that's probably what I would try if faced with this challenge.

Hi Frederik!

I would go with syncing timelines between the videos. I do not have enough time right now to do a 2-video demo. But below is code I have used to sync a Timeline in Hype to an audio timeline. This approach should translate to your video situation.

The key here is the very first line… “addEventListener” & “timeupdate”. More on this DOM event here.

Then we run the “syncTimelines()”. If You are comfortable with JavaScript You will see it is a simple matter to change the referenced elements. Instead of “animationAudio” it could be “video_1”. Instead of “animationSymbHolder” it could be “video_2”.

If “video_1” is the video that’s playing then “video_2” is being synced to it and vice-versa.

This example won’t be an exact match for your needs - but it should give You a starting point as to how a syncing mechanism might work. Perhaps others can offer a more precise example. I will do so when I can.

animationAudio.addEventListener('timeupdate', syncTimelines);
		
		function syncTimelines() {
			animationAudioTime = animationAudio.currentTime;
			animationSymbHolder.goToTimeInTimelineNamed(animationAudioTime, 'Main Timeline');
			
			if (!animationAudio.paused) {
		    animationSymbHolder.continueTimelineNamed('Main Timeline');
			}
			else if (animationAudio.paused) {
			animationSymbHolder.pauseTimelineNamed('Main Timeline');    
			}		
		}


Follow-up:
Is the video “live action” or an animation? Your description seems to tilt towards live action. Unless this is a Hollywood production I don’t see how live action is going to sync perfectly between videos. This could be an advantage as - depending on the viewer’s device & connection - there could be a very slight latency issue when switching between videos.

Thanks for the reply. I’m not very comfortable with Javascript, but I can copy-paste and google enough to make it work… most of the time :slight_smile:
I will try out your solution. Thanks.

While I waited for people to respond to this I made a simple test with two mp4’s playing on the same time on the timeline with two buttons that just hides the top video when pressed. It works okay for this simple test but I don’t think it’ll work with longer videos with sound also.

http://bluemonkey.dk/hypetest/Videoplayer.html

Thank you very much for the help. It’s greatly appreciated.