How can I show/hide a video while keeping it synced to the timeline?

Jan 19, 2024

I'm working on incorporating ASL video in my slides for the first time and am stumped on how I can show/hide the video while keeping it synced to the timeline. I've built a javascript button as a player tab which toggles a variable to 0 or 1. With that variable I can show/hide a layer with my video (waving hand) or use states to show/hide a gif (SpongeBob) as seen in my example: https://360.articulate.com/review/content/dbb8a6c8-5e34-45ff-bd4c-283f2dd86c1b/review

My problem is when I show the objects, the video/gif starts at the beginning. I need the ability to have the video/gif tied to the timeline so the ASL is in sync with the presentation. Any creative solutions?

3 Replies
Elizabeth Kuhlmann

What if you used a shape to hide the ASL video, and a variable to create the toggle button to change the state of the shape to hidden or normal? That way the video is actually always there, on the base layer, and the ASL video is playing the entire time. Just an idea! I attached an example.

Steve Gannon

I agree with Elizabeth that having the ASL video on the base layer might be the easier way to go.

In the sample attached, I instead used motion paths to bring the video onto the slide and make it disappear. The minimum motion path duration is 0.10 seconds so you do see it move on/off the slide but it's very quick.

I set the timeline in the sample to 30 seconds to coincide with the video's duration of 30 seconds. You can use the pause/play buttons as well as drag the seekbar forward/backward to see how they stay in sync.

Seth Neeley
Steve Gannon

I agree with Elizabeth that having the ASL video on the base layer might be the easier way to go.

In the sample attached, I instead used motion paths to bring the video onto the slide and make it disappear. The minimum motion path duration is 0.10 seconds so you do see it move on/off the slide but it's very quick.

I set the timeline in the sample to 30 seconds to coincide with the video's duration of 30 seconds. You can use the pause/play buttons as well as drag the seekbar forward/backward to see how they stay in sync.

That is such a brilliant solution and elegant for the user. Thanks so much for helping me think through this and for providing me with a sample!

For anyone who comes across this, I integrated the show/hide button as a player tab with the following javascript, so it should apply to every slide in the training:

var player=GetPlayer();
if (player.GetVar("ASL") == 0){
player.SetVar("ASL", 1);
} else {
player.SetVar("ASL", 0);
}