Javascript not triggering variable change on iPad SOLVED

What's up Party People? I'm writing this because I could not find it anywhere on the world wide internets and would like to give someone less stress than I received from trying to fix this issue. 

Background: Our courses are video heavy. By that I mean some vids are over 30 minutes and are professionally done. We needed those inserted in our courses. We resorted to hosting them on Vimeo and using a web embed in Storyline because reasons.

Students are required to watch the whole video. So I had the next button locked to the timeline of an object in the scene, calculated the amount of the video in seconds, extended the object on the timeline, and once it reached a certain point the Next button would "unlock" and allow the user to jump to the next slide. This normally works fine.

The problem occurs when someone has to restart their browser for any reason whatsoever. When they come back in to the slide, they have to watch the whole video from the beginning before moving on because Storyline can't interact with the video since it's a web object and it resets the timeline in the slide. No bueno.

So, I wrote some Javascript. Basically, it looks for a VideoProgress cookie and if it doesn't see it, it creates it. Then it gets CurrentTime & TotalDuration from the story file and starts a timer, adding 1 to CurrentTime every second. Once CurrentTime >= TotalDuration (which I set in the slide to equal the video in seconds) it sets VideoOver to true. The Next button is locked to the VideoOver variable and if it's false, it shows the Error Layer and if it's true, it runs a Javascript that resets the CurrentTime variable and also jumps to the Next Slide.

This worked great... until we tried it on an iPad. The next button wouldn't work at all in HTML5 at all. It was just dead. What was really weird is that it would show the variable changing on a slide. I inserted a text box with %VideoOver% and it would show switching from false to true once it reached the set timer, but the button just wasn't working. It just wouldn't do anything if it's tied to the VideoOver variable. Searched and searched. Couldn't find squat about this. 

You know what the problem was? I figured out that the VideoOver variable couldn't be a True/False variable. WHAAA?! Yep. That's all there is to it! If I set the variable to text and set the VideoOver trigger on Equal/Not Equal to "over", it just MAGICALLY starts working! Who knew?! I wonder if maybe, just maybe, this might be a bug?

Anyways, here's the Javascript I made. Enjoy.

 

var player = GetPlayer();
var cookieName = "VideoProgress";

var exp = new RegExp (escape(cookieName) + "=([^;]+)");

if (exp.test (document.cookie + ";")) {
exp.exec (document.cookie + ";");
player.SetVar("CurrentTime", unescape(RegExp.$1));
}

var func = function() {
var currentTime = player.GetVar("CurrentTime");
var totalDuration = player.GetVar("TotalDuration");

if (currentTime >= totalDuration) {
player.SetVar("VideoOver", "over");
return;
}

currentTime++;
player.SetVar("CurrentTime", currentTime);

var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);

document.cookie = escape(cookieName) + "=" + currentTime + "; expires=" + expireDate.toGMTString() + "; path=/";

setTimeout(func, 1000);
}

setTimeout(func, 1000);

Reset the CurrentSlide:

document.cookie="VideoProgress=; expires=" + new Date().toGMTString() + "; path=/";

var player = GetPlayer();
player.SetVar("CurrentTime", 0);

2 Replies
Matthew Bibby

Thanks for sharing this Mark.

Did you consider using Vimeo's API? I'm not sure, but it may be a better option for you. There is an example here that shows the API triggering a variable change on video completion.

That's really weird about the T/F variable, especially because you could see the variable reference change onscreen. The more you know...

Mark Porter

Yeah, tell me about. HTML5 is freakin voodoo.

I didn't even know about the API lol. Sounds cool but if Vimeo goes the way of YouTube and changes their API then all of our courses are broken. We've got a ton of copies of courses for multiple states and having to go in and fix them all is a nightmare I dread, and quite frankly, I was already mostly done making the Javascript to switch gears. Time will tell if it was the best option or not. Thanks for the heads up, man!