Interactive Video loading causing slide to lose sync

[jeremyc4198530]

I have a course with 4 interactive videos. They are about 3 minutes long each, and a sort of choose your own adventure style. The first minute or so sets up a scenario, then I have some click boxes come up that pause the video and slide. The prompt the user to make a choice and depending on the choice the slide will jump to a corresponding bookmark to show how their choice plays out.

In some browsers (Mainly IE and Edge), once the video starts playing a grey gif overlay shows up that has a little animation and says "Loading".. Now, the loading image itself is not my main problem. When that screen is present it seems that the timeline pauses. This makes the click boxes for the scenario misaligned on the timeline, so the video runs several seconds past the desired pause point. I need it to pause at the specific point where the question text is on screen, so the pause getting delayed for however long the loading image is present makes making in informed selection impossible.

Is there a way to preload the videos when the course launches? Or possibly pause the slide the video is on until it fully loads? Or heck, maybe a way to pause the video if the loading screen comes up and resume once its done? I just need the slide timeline to stay synced with the video playing.

Any advice is appreciated!

[Lilybiri]

You talk about an 'interactive video' but from the rest of the explanation it doesn't look like you are using the Interactive Video features. The new triggers to show overlay slides are synchronized with the video, those are real interactive objects. But you talk about 'click boxes'? Are you not using CP2019 but an older version?

[jeremyc4198530]

Im using captivate 2019. I used thee interactive video option to get the "bookmark" feature to show up in the timeline so i could control where in the video it would jump to for the various selections. But I didnt use overlay slides, I just put buttons on the timeline to initiate the pause. (they're buttons not clickboxes, sorry)

[Lilybiri]

That is looking for troubles, sorry to say it so bluntly. Video needs time to load, same happens with users who have audio outside of the video. Never possible to have a perfect synchronization. The design of the Interactive Video is well done with the overlay slides which allow you to have full control. Why did you not try thme instead of going back to the old-style workflow. That worked only with very small video clips, but will never be perfect for 3 minutes videos.

[jeremyc4198530]

Because I don't know what I'm doing, haha! Thanks for the insight. Is there a way to prevent the original video slide from blurring out when the overlay slide come up?

I imagine i can extract the assets from the video and place them onto the overlay slide as well... But i didnt make the videos and the graphics are baked into them so it'd be better if the video doesn't blur. Thank you again!

[Lilybiri · Accepted solution]

OK, understand and this may need some editing.  Have a look at two interactive videos I published publicly. Both are tutorials for Captivate.

Custom Play/Pause button

Editing Character colors

You can find some tips for interactive video, about the creation of master slides for the overaly content and KC slides in:

4 Tips for Interactive Video - Captivate blog

The part that is dimmed will be behind the overlay slide which doesn't have to be transparent. Maybe you will need some static images on those overaly slides but they are totally controllable: you can use advanced actions, Drag&Drop, anything. You will see in my videos that I create a navigation menu to the different bookmarks. Really worthwhile to try it out.

[jeremyc4198530]

Thanks again for the resources. I think Ill start by exporting the video frame that it pauses on and use that is the Background of the overlay. You've really helped point me in the right direction

[Lilybiri]

You're welcome. I really like the Interactive Video as it is designed!