Playbar controls for video-based courses: best practices?

Report · Apr 04, 2022

I'm new to Captivate and trying to create fairly simple training material. The goal is to require learners to watch a video, and answer quiz questions once the video completes. Then they move to the next section, and again watch a video and answer questions. They must complete all videos and all quiz questions to complete the training course. We also want the learner to have basic video playback controls to be able to play/pause and rewind videos as needed.

What is the best way to execute this in Captivate?

Event videos give the desired playback controls, but there are issues with the video timing being separate from the slide timing. If the learner pauses the video for an extended period of time, Captivate will automatically advance to the next slide once slide time has elapsed regardless of whether the user has completed the video. And, if the learner tries to skip the video by scrubbing ahead, they will be stuck on the video slide until the slide time has completed, even if they play the end of the video, which is confusing and not intuitive.

Slide videos fix this issue as the video time = slide time, but learners have the ability to use the playbar to skip ahead, past the end of the video, past all of the quiz questions, and through to the end of the course. This also is very much not desirable.

Using event videos - is there a way to make pausing an event video pause the slide timing?

Using slide videos - is there a way to provide playbar control, but only within the confines of one slide?

Is there a better way to structure the course that I'm missing?

Thank you in advance for your help.

Report · Apr 05, 2022

When I want to achieve something like this, I use the video as an event-video and put this little JavaScript as the Slide OnEnter-Event for each slide with an video on it:

var nameVideo = "Video_Object_1";
$(document).ready(function () {
    var vid = document.querySelector("#" + nameVideo + "c").firstChild;
    vid.onended = function () {
        cp.goToNextSlide();
    };
});

The duration of the slide does not have to match that of the video - just put an action (e.g. a small invisible button) on it that pauses the slide.

The script will put an event-listener on the video element. If the videos is ended Captivate will go to the next slide - here you can put e.g. your questions. In the script you have to modify the name of your video-element with the name of your video on the slide.

This works for me - maybe there is another solution without JavaScript that I can't think of right now.

Report · Apr 05, 2022

I rarely use event video, but I also very rarely use the default playbar.

My recommendation would be to:

use slide video
take out the playbar and its border with Project, Skin editor
use the timeline to add a Next button with a timeline starting at the end of each video
You'll need a custom Play/Pause button and a Replay button. Here are two tutorials to achieve those:
Custom Play/Pause button
http://blog.lilybiri.com/replay-slash-reset-slide-2-captivate-tutorial

However you also can convert your videos into interactive videos, which can have question slides at certain bookmarks of the video. Let me know if you want more info about them. Here is an example of an interactive video:

http://www.lilybiri.com/published/InterVidCharacter1/index.html

Report · Apr 05, 2022

Thank you for the feedback and links. I'd like to keep the playbar if possible, so viewers can easily go back in time to review if needed. If you have any more info about interactive videos, I'd be very interested in learning more. Thank you again!

Report · Apr 05, 2022

If you keep the playbar, you'll not be able to force the view of the video. Either by scrubbing the progress bar or by clicking the Next button, learner can skip all videos.

Find the tag 'Interactive video' on my blog.