Hi folks, Does anyone have experience working with multiple videos in a single timeline? I have a project where I want each video to play based on the location of a slider in the animation.
For instance, I have grouped 4 videos (in a line) that are controlled in visibility behind a mask. As you slide the slider the videos pop into view in turn. I’ve animated the slider to move the videos over.
What I now want to do it control each of the videos with the same play/pause button, but only play the video if it’s in the display window.
I’m thinking that I am going to need some JS, but I am new to it, so not sure where to start. I can
share the hype doc if necessary.
for each of the play/pause buttons, but not sure how to tell the animation to play the correct video. I also would like to pause the video if the slider is moved.
It probably depends a bit on your setup and how you’ve implemented the slider; if you have a zip of your .hype document that would probably help folks give advice.
Given you add a CSS class myVideos to all of them and you know what the current video is by the virtue of your slider you could do something like this:
var sceneElm = document.getElementById(hypeDocument.currentSceneId());
var videoElms = sceneElm.querySelectorAll('.myVideos');
// assuming that you somehow populated currentVideoElm with current Video
var currentVideoElm = YOUR CODE TO SET THIS HERE;
videoElms.forEach(function(videoElm){
videoElm.pause();
})
currentVideoElm.play();
You could also select by video tag but that would assume that all videos in a scene are part of the list
var videoElms = sceneElm.querySelectorAll('video');
Hi @MaxZieb and @Jonathan thanks for coming back to me. I think it’s best if I upload the file. I am still relatively new to js and not quite sure how to input the js into the file. Perhaps you guys could take a quick look and guide me in the right direction. I have just signed up to a js online course, so I will have more knowledge on it soon.
I can’t seem to get the file size small enough to upload - here’s a link to the google drive file: https://drive.google.com/file/d/1bwvIqJEfEdpYDP67HpvkkCHpnFHu2M3c/view?usp=sharing
There are a lot of different ways that you could tackle this. In general, you need to keep the “state” on which is the selected video somewhere. It could be set explicitly via javascript, or could be a based around aspects of the display. From how I’m looking at the document, which video is selected is a function of the time in the “swipe down” timeline. Therefore the “state” of which video to play/pause can be programmatically determined from that.
In your document, you’ll first need to set unique element IDs for your video elements. I have those as “video1”, “video2”, “video3”, and “video4”. These names are reflected in the array in the sample code.
For a play function, it could look something like:
// make an array of all the videos
var videoIDs = ["video1", "video2", "video3", "video4"];
// get the time in the "swipe down" timeline
var swipeDownTime = hypeDocument.currentTimeInTimelineNamed('swipe down');
// convert this to a percent complete
var percent = swipeDownTime / hypeDocument.durationForTimelineNamed('swipe down');
// figure out which "step" we're on by multiplying the percent complete times the number of steps, and rounding down to a while number
var totalSteps = videoIDs.length; // we'd do minus one, but the intro is a + 1
var stepIndex = Math.ceil(percent * totalSteps);
// now loop through every video and play if it is the one we are on
for(var i = 0; i < videoIDs.length; i++) {
// get the video element
var videoElement = hypeDocument.getElementById(videoIDs[i]);
// subtract one from stepIndex to account for the intro. If it equals are index then play, otherwise pause
if(stepIndex - 1 == i) {
videoElement.play();
} else {
videoElement.pause();
}
}
Hopefully that’s clear what it is doing from the comments, but if not let me know. This is the approach I would take specific to your document as it stands now, but there definitely could be better ways depending on how you might change it in the future.
Hi @Jonathan,
Thanks for this code. This code would be placed into the function for the play button. Does a similar code get placed in the function for the pause button?
Steve
The way you did pause doesn’t really need much modification; for a pause you could simply call pause() on all the elements and don’t need to be too smart about it. You could use a loop instead of the individual calls, but that’s just a code “cleanup.”