3 Steps to Using Cue Points to Pause a Video and Display Layers

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.