At a recent Articulate workshop a community member asked me: how do I add multiple cue points to pause a video at several points, which display different slide layers with additional information, without getting my Timeline out of sync? 

Let me start off by showing you an example of how that might look. Here’s a demo of a video with several pause points where additional information appears:

Click to view example.

As you can see in the demo, the movie pauses at various points to display additional information which resides on slide layers. When the user clicks the exit button to close a tip, the movie resumes playing.

It’s pretty straightforward to set this up in Articulate Storyline. Let me walk you through it step-by-step:

Create your slide and slide layers

Start by adding your video to your base layer, and style the slide to look however you want. You might notice that when you preview your course, the default setting in Storyline lets users pause and play a video by clicking on it. I don’t want users to be able to pause the video, so to fix this, I put a hotspot on top of the video. Then, right-click the hotspot and de-select “Show Hand Cursor on Hover.” This means users can no longer click on the video to pause it.

In addition to creating your base layer with the video, you should also set up your slide layers, which contain the pop-up text information. On your slide layers, be sure to include an exit button which learners will click when they’re done reading the text to hide that layer.

Another tip: set the Slide Layer Properties to “Pause timeline of base layer”. This will make sure that the Timeline of the base layer pauses as the Layer is viewed, and should prevent the cue points on the timeline from becoming out of sync.

Insert cue points to your base layer

Next, go to the Timeline and add your cue points. Simply drag the Playhead (the blue line with the upside down triangle at the top) across the timeline to the point in the video where you want the pause to occur. Wherever you stop the playhead, the slide will show you how the video looks at that frame, which helps you determine exactly where the pause should happen. Once you’ve located the right point on the timeline, right-click and choose “Create Cue Point at Playhead” from the menu. This will insert a cue point. Repeat this process until you’ve added all the cue points you need.

Add triggers

Now that your slide layers and cue points are in place, it’s time to create your triggers. On your base layer with the video, add two triggers for every cue point you’ve inserted: the first will pause the video when the Timeline reaches the cue point, and the second will display the associated slide layer when the Timeline reaches the cue point. Add both of these triggers for every cue point on your Timeline.



Next, for every slide layer, add two triggers to each exit button you added earlier. The first trigger will hide the layer, and the second will play the video.

Since you’ve set the Slide Layer Properties to pause the timeline of the base layer, the video should resume exactly where you left off when you close the slide.

 

And there you have it! This three-step process should help you achieve the functionality you wanted. Do you have other favorite tips or tricks to pause videos and display new information? Do you prefer to use a hidden state, or a new slide layer, or something else? Let me know in the comments below!

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

39 Comments
Maria Hoepf

Amanda – I have the same question. I would also like allow users to pause the video at their convenience. If I turn on the show video controls, the video pauses but not the timeline which will make the cue points and the appearing of the layers out of sync with the video. If I use the seek bar on the slide itself instead of the video controls, the user can adjust the volume within the course and pause the timeline in addition to the video -- which is nice. However, the downfall to using the seek bar is that it always looks a little funny if you’re using layers to do something similar to this example since the layer has its own timeline. What would be great is if it were possible have the option of continuing to show the base layer seek bar instead of showing a separate seek bar for each la... Expand

Bill Kelleher

Hi Maria - I was looking for something that would help this as well. What I do is use a video that plays automatically in the slide timeline, and then I cover that with a transparent shape to make sure they can't interact with the video other than through the player buttons and seekbar. I also use a shape appearing for .25 seconds on the timeline, rather than a cue point to show my interactive elements, because when I do things this way, I find the Storyline is inclusive of previous cue points if you jump ahead of them, so it will show the interactive elements, even if you don't want them to. I set the trigger to show the element when the state of that shape is normal. Here's an example: http://wkelearningdemos.s3.amazonaws.com/InteractiveVid/story_html5.html The content is al... Expand

Bill Kelleher
Erica Inge
Nicole Legault
Erica Inge
Graeme Foulds

I've found that another very useful setting that should probably be included with this type of interactive video, is to ensure that the Slide Properties for the Base Layer slide containing the video, is set to "Reset to initial state" when revisiting (on the cog wheel, bottom right). I discovered when creating this type of content that if a user started viewing the video, exited before it reached the end and then went back to view it again, the video would continue playing from where it left off, but the intervening time spent away from the video would be counted on the base layer's timeline. This completely destroyed the synching of the cue points (and hence the appearance of subsequent messages on the layers). I tried all manner of means to try and get the video to reset so that i... Expand

Graeme Foulds

Amanda and Maria, I had the same need. What I did was to add a control button to the base slide containing the video, with the following triggers: 1) pause the timeline on the base layer when the button is clicked (on condition that its state is Normal, i.e. it hasn't been clicked before the video starts playing - I have a start button superimposed on top of the video that must be clicked in order to start the video, so that the user can start it when he/she is ready, and I don't want the user to start playing the video through the Pause button while the Start button is still superimposed on top of it), 2) resume the timeline when the button is clicked again (on condition that its state is Visited), and 3) to change the button's state back to Normal once it is clicked if its state... Expand

Loïc Le Gac