Trigger Next Button to show when video (web object) ends

For what it's worth, best learning practice suggests that if the video is that big, the learners are going to ignore it anyway. If you break it up into smaller sections, the learners can assimilate it, you can put it in your presentation where  you'll have complete control of it, and you'll save a lot of time not having to figure out how to know when it ends.

Walt, I totally agree with you on breaking them into smaller parts. However, the video lectures are such that we cannot have them split topic-wise. Hence, the workaround. 

Some Learning Management Systems are not set up for serving large videos anyway, so sometimes this is a necessary workaround. Rupa, I'll check the project in Storyline 2 and Chrome and get back to you. Did you see the Chrome issue with the Flash or HTML5 version of the course? Which version of Chrome are you using?

Michael, when I previewed the demo from the link you shared, it worked fine in Chrome. But, when I downloaded the Storyline file, published and viewed it in Chrome, it didn't work.

Chrome version is  63.0.3239.132. And, I checked the HTML5 version.

Thank you!

Yes, I just checked it. The only problem I see so far is when publishing to the local disk and trying to view it in Chrome from the local disk. I think that Chrome has a security setting that prevents this. Can you upload a test file to your LMS to see if it works okay in Chrome when published online?

Bingo! It is working perfectly when uploaded and published in LMS.

That's great to hear. There is a new version of their player that you might want to use in the web object. The one I had used way back when was 5.8.8 and it looks like the current version is 6.6.0. I had also worked a little on a project that lets you resume a VideoJS embedded video where the user left off, if they come back and resume the course. I'm not sure if that project was complete, but let me know if that would be useful to you. Thanks.

Thanks so much, Michael. I shall use their current version and see how much we are able to accomplish.

Your help is greatly appreciated.

I'm happy to help. Let me know if you need anything else.

Hey Michael,

Is there any chance a similar approach can work with the player at Widen DAM? I'd like to use the native player there rather than video.js if possible so it is consistent with other courses created previously. 

Do you have a link to their video player? I see information about their web services API in their support documentation, but nothing about the video player. I'm not receiving email notifications from the forum here, so my reply might be delayed.

Hey Michael,

Thanks for the fast response. I emailed Widen support and they confirmed that no API exists for the video player at this time.

It looks like the only option to get triggers working is to use the video.js player which is possible. My issue is I'm having trouble getting it to be responsive in the storyline slide if the player window is resized. 

Do you have any experience or tips with this, I'll be the first to admin that my html coding skills are not very good.

I did a little searching and it appears that the player should be responsive, but I haven't tried it in Storyline. Here's some information on that https://coolestguidesontheplanet.com/videodrome/videojs/

If I get some time this week, I will take a look at it. Let me know if you figure it out in the meantime.

Hi Michael

Thanks for sharing SL file. I've downloaded it and republished to Review. Unfortunately the variable videoEnd doesn't change to true once completed (it works fine on your website). Can you shed a light what the issue is please.

Joanna, have you tried viewing it outside of review, either from your LMS or posted on a webpage? When I view the Firefox debugging from the link you posted, I see that a bunch of the files are blocked that would enable the video detection:

Blocked loading mixed active content “http://vjs.zencdn.net/5.8.8/video-js.css” - among others.

Yes, you're right - when uploaded to webpage it works fine. Thanks.

Would you mind sharing/editing js code when video is stored on my own drive rather than external resource as Vimeo? I'm trying to make SL work this way: play the video, change the var videoEnd to true and jump to next slide.

I'd appreciate any help or hint :)

Hi Matt,

My video is inserted as web object.  Don't think "when media completes" work for web objects - that's why I need some js to communicate between WO and SL.

Yes, it should be as simple as hosting a copy of the videoJS files locally, as long as no browser security issues interfere with the javascript running. Are you looking to support any particular browser(s)? I can work on it this afternoon and try to have a working demo done for you.

@Matt - thanks for the link.

@Michael - I'm trying to use my basic knowledge in JS but still no luck (the video is playing but variable doesn't change) so if you're happy to take a look here's code I'm working with:

Thanks so much.

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" controls autoplay controlsList="nodownload" width="630" height="473">
  <source src="video1_hb.mp4" type="video/mp4">
  <source src="video1_hb.ogg" type="video/ogg">
  <track src="cc.vtt" kind="subtitles" srclang="fr" label="French">
</video>

<script>
var vid = document.getElementById("myVideo");
vid.onended = function(){callEnd()},

function callEnd() {
    var player = parent.GetPlayer();
    player.SetVar('videoEnd', "true");
    }
</script>

</body>
</html>

Joanna, I started with the base project I had working before, and modified it so that it referenced a local file that is embedded in the course. This should work the same whether or not the project is run from the web or run locally - the video file reference is relaive, so it will load the video from the web if run from the web. It works fine for me in Firefox. Please test it out and let me know if you need further help. Sorry about the time zone delays and that I didn't get to this yesterday. See file attached.

Thanks for your help and time Michael. Can you also share your modified index.html file so I can check it with my files please?

Currently I'm testing this code but variable doesn't change when video ends (tested on IE, Firefox and Chrome) and when the slide starts on IE and Firefox I get an message asking whether I wan to download the video:

<iframe src="video1_hb.mp4" width="630" height="473" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var SLplayer = parent.GetPlayer();
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
        SLplayer.SetVar("videoEnd","Playing video now");
    });

    player.on('ended', function() {
        SLplayer.SetVar("videoEnd","True");
    });

</script>

I'd need to make it work on all browsers ideally...

You can always view the content of the web object by publishing the project and then viewing it the output folder, but I've attached that one here for you.

It looks like your code above is a little mixed up. You're trying to load a local mp4 file but you're loading the Vimeo Player. You can use that only with Vimeo videos. You will have to use the VideoJS player or another to load your own mp4 files. Check out the attached index.html file. I don't have Chrome installed right now, but I did test it in Firefox and IE11.