Forum Discussion

BenjaminBaris's avatar
BenjaminBaris
Community Member
2 years ago

Trying to change storyline variable from Web Object

I currently have a video web object embedded into my storyline slide. I have a javascript code in the web object's HTML that detects when the video is finished. I have tested this in the browser outside of storyline and it appears to work fine.

I am trying to set the variable inside of Storyline when the video is finished but I am not having any luck. I have researched on here all day and saw others have had luck but the posts are almost 10 years old. 

I noticed this pops up in the browser's console after publishing from storyline: Failed to read a named property 'player' from 'Window':

Here is the code from the web object's HTML:

<script>
    // Initialize the video player
  var player = videojs('my-video');
 
  // Variable to track if the video has been completed
  var isVideoComplete = false;
 
  // Event listener for the 'ended' event of the video
  player.on('ended', function() {
    isVideoComplete = true;
    console.log('Video completed ' + isVideoComplete);
window.parent.postMessage('videoComplete', '*');
 
  });
  </script>
storyline 360
  • SamHill's avatar
    SamHill
    Super Hero
    2 years ago

    Hi Benjamin, you can use the Storyline player API to set a variable.

    Firstly, define your boolean variable in Storyline that will change to TRUE once the video is complete, for example "videoComplete"

    Within your WebObject you would do something like this.

    player.on('ended', function () {
        // Get a reference to the Storyline player
        const slPlayer = window.parent.GetPlayer();
        // User the SetVar method to set the Storyline defined
        // variable. Note: You can also use GetVar to get the
        // value of a variable from Storyline
        slPlayer.SetVar("videoComplete", true);
    });
Related Content