How to delay next slide until after video

Jan 08, 2020

Hi

I have a video as an embedded web object and want to delay the user being able to click next slide in the player until the video has been played. I can't see how to have this option in the triggers - any ideas?

Thanks so much

5 Replies
Jerry Beaucaire

Two ideas:

  1. Simple TIMELINE length

    Make sure the timeline is the length of your embedded video.  If the video is 200 seconds, make sure the timeline is 200 seconds.

    Then set a trigger to enable the NEXT button at 195 seconds (or so).


  2. JAVASCRIPT + VARIABLES

    Depending on where you are imbedding this video from, you may be able to use JAVASCRIPT and a variable to enable the NEXT button.

    We use WISTIA for our company videos, so here is the imbed code we use to both show the video and adjust a TEXT variable called "EndOfVideo" to On when the video stream completes.   We have an additional trigger in the store that enables the NEXT button when the variable "EndOfVideo" changes to On.

    //This script detects Wistia video ending and adjusts a Storyline variable called "EndofVideo" to On, this variable must exist
    //This example shows the detection code added to the IMBED code

    <iframe src="https://fast.wistia.net/embed/iframe/1234567890?seo=false&videoFoam=true&autoPlay=true" title="Wistia video player" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="1280" height="720"></iframe>
    <script src="https://fast.wistia.net/assets/external/E-v1.js"></script>

    <script type="text/javascript">
    wistiaEmbeds.onFind(function(video) {
    video.bind("end", function() {
    var player = parent.GetPlayer();
    player.SetVar("EndofVideo","On");
    return this.unbind;
    });
    });
    </script>

     

     I am not a javascript whiz, we got this code from a post here in the community.

     

Vincent Scoma

Hi Sue,

It looks like Jerry provided some excellent tips! I also wanted to chime in and share some possible ideas that might help. 

Since you want to restrict navigation to ensure the user watches the video in its entirety, you could insert the video as a file and disable the next button, as you mentioned. The file would need to be stored locally on your computer in MP4 format. 

This discussion is closed. You can start a new discussion or contact Articulate Support.