Blog Post

Articles
4 MIN READ

Use Cue Points to Pause a Video in Three Easy Steps

NicoleLegault1's avatar
NicoleLegault1
Community Member
10 years ago

Videos are often used in e-learning as a way to share information, but they typically don’t require much (if any!) interaction: learners simply sit and watch. In certain cases that’s fine, but in other instances, you want to enrich your videos with additional contextual information or pop-up questions that engage the learner and make them think about what they’re watching. With Storyline 360’s cue points, you can easily pause your videos to add interactivity in a few quick and easy steps.

What are cue points? They are small indicators or flags inserted directly on the Storyline timeline, where they allow you to precisely align objects and their timing.

 

Take note of the three cue points on the timeline.

Cue points are commonly used to sync animation, but they can be used to trigger just about any type of interactivity—including pausing a video. After you pause the video, you can have just about anything happen, from showing a new layer to displaying a text caption. Let’s explore the steps to pausing (and restarting) a video using cue points.

Step 1: Insert Your Video

Your first step is to insert a video on your slide. Finding high-quality videos to use in your courses is easier than ever with Content Library. Simply navigate to the Insert tab of the Storyline 360 ribbon and select the Videos button from the Content Library section.

Content Library provides stock videos at your fingertips.

You can then search for a video and click the Insert button when you’ve selected the one you want. In the screenshot below, you’ll see I’ve inserted a Content Library video on a slide. Note that its duration is 10 seconds on the timeline.

By default, learners will be able to click on the video to play and pause it. However, we want to prevent learners from doing that because it can cause our slide timeline and video to get out of sync, which can prevent the interaction from working as desired. So, how to prevent learners from clicking on the video? Overlay a hotspot over the video. Hotspots are also available under the Insert tab of the Storyline ribbon.

 The hotspot covers the entire video.

Once you’ve added the hotspot, right-click on the hotspot and from the menu disable “Show Hand Cursor on Hover.”

 Disable the Show Hand Cursor on Hover option. 

You’ve now inserted a video on a slide. The next step is to add the cue points that will be used to pause the video.

Step 2: Add a Cue Point

Inserting a cue point is quick and easy. Click on the timeline where you want to insert the cue point. This will move the blue playhead to that spot.

 Place the playhead where you want to insert the cue point.

Next, insert a cue point by right-clicking anywhere on the timeline and clicking “Create Cue Point at Playhead.”

The cue point is added behind the playhead.

In my example, I want to pause the video at the three-second mark. If you need to move the cue point, simply click on it and drag it anywhere on the timeline.

Step 3: Add a Trigger

Your next step is to add a trigger that will pause the video when the cue point is reached on the timeline. Use the trigger panel on the right-hand side of the application to create a trigger. The wizard should look like this:

It’s a good idea to use the “Pause timeline” action (as opposed to “Pause media”) to ensure that your video and slide timeline don’t get out of sync.

Now, what you do from here on is totally up to you. One thing you could do is add a second trigger to the cue point that changes a text caption’s state from “Hidden” to “Normal.” Or you can use the cue point to also display a new layer. On this layer you could provide additional information or ask a question about the video content. You could even just skip to a new slide altogether to have them answer a graded quiz question. The options are really endless.

When it’s time to restart your video, add a trigger that will resume the timeline, like this:

With that trigger, the slide timeline (including the video) will be restarted.

Cue points are a quick and easy way to add pauses to your videos where you want to insert interactivity or additional information. Do you have any tips of your own about working with cue points? I’d love to hear your 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.

Published 10 years ago
Version 1.0
  • BobWiker's avatar
    BobWiker
    Community Member
    Thanks, this is helpful and very timely. In some of my screen recording videos I want to pause, pop up some info or a callout, then resume. Here's how to do that:

    1. Create a "Pause & Popup" layer with whatever element(s) I want.
    2. Set layer's properties to 'pause timeline of base layer'
    3. Set the duration of my popup layer's timeline as desired.
    4. Add popup layer Trigger to 'Hide this layer when timeline ends'
    5. On main timeline, set cue point where I want to pause & pop up.
    6. Create a slide Trigger to 'Show layer myLayer when the timeline reaches Cue Point #1'

    You can add more popups simply by copy-and-pasting your "Pause & Popup" layer and adding cue points (and slide triggers) to the main timeline.
  • KamilNowek's avatar
    KamilNowek
    Community Member
    Nice solution but there is one big problem - video is loading separately than timeline and often (especially video is long and its weight is huge) timeline starts but video is still loading. Then our link between video and timeline doesn't work correctly - there is a slip.
  • Actually, I've found that the best way to "disable" an item that you want users to be able to see but not click on, is to use a nearly transparent shape. Rather than covering up the video with a hotspot that comes with a trigger that needs to be deleted, cover the video with a rectangle with it's transparency set to 99%. Make sure the rectangle is on top of the video. As long as the transparency is set to 99%, the rectangle will have enough "color" to it that the users mouse will "see" it, but it will be light enough that the actual user won't see it. The hand won't appear when the user is hovered over the video, and there is no trigger to delete.

    Using this method gives you an added way to "disable" and "enable" selecting the video since you can, of course, still use the timeline to make the rectangle appear and/or disappear at certain points on the slide.
  • ChrisFry1's avatar
    ChrisFry1
    Community Member
    Thanks for this it has got me part way there. I am trying to produce a video tour that pauses the video at a cue point and shows a layer with information on it. The user will then click the layer to hide it and the video will resume. It then stops at another cue point and the next layer appears etc. Problem I have is the layers seem to 'pop up' out of sync after the first one.

    Chris