I'm having some trouble.. I'm very new in the html game... I have a project that has a video file, I put in graphics, animate them and then set a start timeline in the end of the project. I have 2 issues. When the video takes some time to load on websites, the graphics go out of sync with the video. Also, when the graphics hit the right spot when it loads quickly, the graphics drag behind after a few plays and then become out of sync. I would like all of it to start at the same time when it has loaded and be in sync all the time. What am I doing wrong?
videos are not synced with the timeline.
if you do a simple forumsearch, you'll get a couple of approaches to solve this ... for example search: video sync
I found this discussion, Sync Timelines to Video & Audio in Tumult Hype. which I do not understand.. Is there a more simple way to do this?
You can run this code On Scene Load or On Prepare for Display:
if (!hypeDocument.videoInterval) {
hypeDocument.videoInterval = setInterval(function() {
var videoElm = element.querySelector('video');
if (videoElm && videoElm.readyState) {
videoElm.currentTime = 0;
videoElm.play();
clearInterval(hypeDocument.videoInterval);
delete hypeDocument.videoInterval;
}
}, 20);
}
If you also want to start the main timeline once the video starts, this variation should do the trick
You can run this code On Scene Load:
hypeDocument.pauseTimelineNamed('timelineName');
if (!hypeDocument.videoInterval) {
hypeDocument.videoInterval = setInterval(function() {
var videoElm = element.querySelector('video');
if (videoElm && videoElm.readyState) {
videoElm.currentTime = 0;
videoElm.play();
hypeDocument.startTimelineNamed('timelineName');
clearInterval(hypeDocument.videoInterval);
delete hypeDocument.videoInterval;
}
}, 20);
}
4 Likes
It's not working, am I correct in inserting this?
I copy this code, select on scene load, run javascript, input the code in line 5 and that should be it?
Am I supposed to insert anything into the code?
sincerely,
The NewGuy...
create a simplyfied hypefile showcasing your issue and your attempt and someone may be able to help ...
Thanks @h_classen, that works for me too!
@egill I wasn't aware that you are looping the setup ...
We have now one sync event when preparing the scene for display (see ❶)
If you are worried about "drift" between the video and the Hype timeline, you can additionally call the video sync at the end of the Hype timeline ❷ + ❸ instead of using gotoTimeInTimelineNamed. The function then resets the video and the timeline again.
1 Like