I have an animation that uses 5 stages each with its own video and buttons that appear on their own timeline once the video is finished. The trouble is is sometimes the video is slow to load (even though they are about 5 seconds and less than 1mb in size) and sometimes the button timeline appear/loads before the video has finished and sometimes before it has even started which isn’t ideal. Is there a way of setting it so the button timeline doesn’t start until the video has truly finished playing rather than starting at a set time which doesn’t take the progress of the video into account!
To do something when a video ends, follow these steps:
Set a unique element ID for your video in the Identity inspector: myVideo
Next, run the following code ‘on scene load’ for the scene containing the video. When the video reaches its final moment on that scene, the MySceneName action will be triggered:
hypeDocument.getElementById(‘myVideo’).addEventListener(‘ended’,myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the ‘ended’ event
hypeDocument.startTimelineNamed(‘MyButtonTimeline’, hypeDocument.kDirectionForward);
}
Hope that helps!
You may want to make sure that your videos are as optimized as you can get them. A tool like Miro Video Encoder is helpful for this.