In this quick tutorial, I'll show how to start a timeline after a media element (in this case, a video) has played for five seconds. This example could be easily modified to do the following things:
- Jump to the next scene after a video has played
- Run a timeline after an audio element has played half way through
- Play another audio element after one has completed
To sync your video with an animation in Tumult Hype, we’ll first need to detect the current position of your video. This is known as the timeupdate
value, and is well supported in modern browsers. Next, we’ll need to set specific actions using the JavaScript API in response to different timeupdate
values.
In the example below, we’ll be detecting the current time of a video, and then starting a timeline when 5 seconds have elapsed.
(Please download the attachment at the bottom of this article to see this JavaScript in action).
This function also works with audio files that are contained within a standard audio element -- timeupdate
is a value generated by both audio and video elements.
// This establishes the T1 variable as an integer.
var T1 = 0;
// Listen to the 'timeupdate' value:
hypeDocument.getElementById('video1').addEventListener('timeupdate', function() {
var currentTime = hypeDocument.getElementById('video1').currentTime;
// If the current time is greater than 5, run the RedRobin timeline.
if (currentTime >= 5 && T1 == 0) {
hypeDocument.startTimelineNamed('RedRobin');
// This ensures that the 'startTimelineNamed' action only occurs once, not at every point beyond time = 5.
T1 = T1 + 1;
}
});
The hypeDocument.startTimelineNamed('RedRobin');
function can be replaced with virtually any action you would like to trigger. Please see the JavaScript documentation for options.
Running multiple actions at different times
Another option: Perform an action at multiple time periods (5 seconds and 10 seconds, for example) by adding additional ‘T’ variables:
// This establishes the T1 variable as an integer.
var T1 = 0;
var T2 = 0;
// Listen to the 'timeupdate' value:
hypeDocument.getElementById('video1').addEventListener('timeupdate', function() {
var currentTime = hypeDocument.getElementById('video1').currentTime;
// if the current time is greater than 5, run the RedRobin timeline.
if (currentTime >= 5 && T1 == 0) {
hypeDocument.startTimelineNamed('RedRobin');
// This ensures that the 'startTimelineNamed' action only occurs once, not at every point beyond time = 5.
T1 = T1 + 1;
}
if (currentTime >= 10 && T2 == 0) {
hypeDocument.startTimelineNamed('ParrotParty');
// This ensures that the 'startTimelineNamed' action only occurs once, not at every point beyond time = 10.
T2 = T2 + 1;
}
});
Example document: syncVideoWithAnimations.hype.zip (4.2 MB)
Detecting the end of a video or Audio element
Run the following script (in Hype's built in JavaScript editor) to detect when an element has completed playing:
var video = hypeDocument.getElementById('video1');
video.onended = function(e) {
/*Do things here!*/
};
For more HTML5 Media events, visit the W3.org page on the topic, or jump straight to the 'timeupdate' event.