Referencing Embedded Vimeo Video with Javascript API

I have inserted a Vimeo video into a course using Insert > Video from Website. It plays fine using the Vimeo player. However, I would like to use the Vimeo API in an Execute Javascript trigger to access events, methods and other properties about the video.

I have included the Vimeo API Javascript library in the published story_html5 file, and I am attempting to make a connection to the Vimeo player.

Where I am running into a challenge is that Storyline creates an iFrame to hold slide content, and then the embed code also has an iFrame nested within the slide. I can't quite figure out how to point to it. Below is a sample of what I have attempted. Any suggestions or other approaches will be greatly appreciated. Thanks!

 

Trigger: Execute JavaScript when timeline reaches 5s

(delayed the call to ensure the iframe had time to load)

 

var iframe = document.querySelector('iframe').contentWindow;

var cframe = iframe.document.getElementById('ckpt1');

var player = new Vimeo.Player(cframe);


player.on('pause',function(){

    alert("Video paused");

});

 

The variable iframe should contain the iframe created by Storyline to hold slide content, the variable cframe should contain the nested iframe with id='ckpt1', and the variable player should be the Vimeo player in the cframe.

I have an on pause event that should alert me that the video has been paused in the Vimeo player. 

 

Thanks in advance for your help!

 

 

 

4 Replies
Fred Tacon

Thanks, Seth! After I posted this, I found an old thread from someone else trying to do something similar with Wistia instead of Vimeo. They put all of their scripting within the Embed code window for the web video. I tried that with the Vimeo video, and so far it works! Still testing to do, but it is encouraging. If it doesn't pan out, I will look into your suggestions. Thanks!

Fred Tacon

Hi, Kate!  Yes, there are events and methods in the Vimeo API that will tell you when the video plays, how much has been viewed, and when it is complete. I've actually set our completion credit at 80% just in case someone forwards to the next page in the course before the video is completely finished. The % complete triggers a change to a Storyline variable.

Here is what I have put into the embed code for each Web Video object. Let me know if you have questions about it. There's also the URL to the Vimeo API reference guide at the bottom.

<!-- VIDEO #1 -->

<iframe id="ckpt1" src="https://player.vimeo.com/video/#########?autoplay=1&autopause=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>

<script>

  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player(iframe);
  var SLplayer = parent.GetPlayer();

  player.on('timeupdate', function(data) {
    var perc = parseFloat(data.percent);
    var ckpt = SLplayer.GetVar("ckpt1");
        if (perc > 0.8){
            if (ckpt == 0) {
                SLplayer.SetVar("ckpt1",1);
            };
        };
  });

</script>

 

Vimeo API reference: https://developer.vimeo.com/player/sdk/reference