We are delighted to bring you this brand new episode of our popular YouTube series covering some of the amazing things that are possible with Articulate Storyline 360 when we begin to incorporate additional services and features via JavaScript and APIs.
In this video, we are diving deep into the world of Articulate Storyline 360, JavaScript wizardry, and the YouTube Player API. If you’re an Articulate Storyline developer looking to take your eLearning experiences to the next level, you’re in for a treat!
The YouTube Player API, generously provided by Google, opens up a world of possibilities for Articulate Storyline developers. It’s well-documented and free to use, as long as you adhere to Google’s Terms of Service.
Video is a popular medium for a lot of eLearning experiences which a user may be required to learn from. For many online course publishers, using a streaming service like YouTube to host your videos can be a game-changer. It allows for better control over course size, faster slide loading times, and an enhanced user experience, especially for learners with slower internet connections.
However, a common challenge arises when we want to create triggers based on video completion in Storyline. Traditional video objects on slides don’t offer this capability. But fear not, for we have a solution! By leveraging the YouTube Player API in conjunction with embedded YouTube videos, we can unlock a world of custom automation possibilities.
In this tutorial, we will walk you through a practical example of how to harness the power of the YouTube Player API to control automated actions within an Articulate Storyline-produced eLearning experience. You’ll see how JavaScript, project variables, and triggers come together to create a seamless and interactive learning journey for your audience. So, let’s dive in and discover the magic of combining Articulate Storyline and the YouTube Player API!
You can watch the latest episode of our advanced Articulate Storyline 360 tutorial series right now on YouTube, or visit our Storyline Magic Series Episodes page on the Discover eLearning website where you will find all episodes published to date:
Be sure to subscribe to the Discover eLearning YouTube Channel to be notified of future episodes!
Discover eLearning are specialists in the development of engaging interactive digital learning content using Articulate Storyline 360, having created award-winning eLearning work utilising everything that the software has to offer, as well as our entries into weekly eLearning Heroes Challenge ran on the official Articulate website.
A copy of the written transcript for this episode of our Storyline Magic Series is available to read here:
Hello and welcome to a brand new episode of our Storyline Magic Series here on the Discover eLearning YouTube channel.
This video is going to be a great watch for Articulate Storyline developers looking to get creative using JavaScript, project variables, and triggers, as we’re going to be doing a deep dive into the YouTube Player API to see how we can use it to create custom automation in Articulate Storyline 360.
The YouTube Player API comes to us courtesy of Google, is very well documented, and free to use following we abide with the Google Terms of Service.
In Storyline we may wish to use a streaming service like YouTube to host our video if we are perhaps dealing with a video-heavy course, which means that we can have a better control over our course size, slide loading times, and a better overall user experience for those perhaps with lower bandwidth.
Typically by not having a standard video object on our slide and instead using a Storyline Web Object to load video, we would end up losing the opportunity that this provide us for creating triggers based on video completion in Storyline’s available actions list.
But combining any embedded YouTube video with the Player API creates this opportunity, and so much more for building custom automation, as you will see in this worked example.
So here in my project I have a short video clip which plays as soon as the timeline starts, and then when the video has ended I have a Storyline trigger in place to load the Reveal Button layer which plays a short animation of our dog character here digging up the Next slide button out of the ground.
I’m going to delete that video and replace it with a completely blank web object. Before doing this I also uploaded my video clip to YouTube and got it’s embed address which will provide us with the video ID which we will be using in just a second.
Let’s go ahead and build the address to our video for our Web Object:
First we’ll start with our video’s embed address which should look something like this with the ID shown after the word embed. Now type a question mark, and we’re going to add in some parameters to our video. The first, and most important of all, is the parameter enablejsapi=1, which is going to enable the video to speak directly to the YouTube Player API within our project. We’ll add an ampersand and include a few more parameters – autoplay=1 will start the video without the user needing to click play (so long as the user has interacted with the Storyline activity in some way before hand), rel=0 will prevent the related videos screen from showing when the video has ended, and modestbranding=1 is a nice way of stopping some of YouTube’s own branding from appearing within the player UI.
This is now ready to go, so we’ll get this onto our slide and in position.
Now let’s create two new variables for storing both the video status and the current time value in Storyline. Both of these need to be Text type variables.
Ok let now get into some JavaScript coding and work some magic using the YouTube Player API!
Create a new trigger to Execute JavaScript when the timeline starts on our slide.
We’ll start our script by including the standard getPlayer function provided by Storyline to gain access to all our Storyline project variables, and also a variable which we will later assign to our video object.
Because the YouTube Player API itself uses the term player quite a lot, what I’m actually going to do here is change the name of the variable that is used by our Storyline function, and you may think that we are not able to do this and that the code provided by storyline is set in Stone, but that’s only true on the function side and we can actually name the variable anything we like, so long as we remember to use the same variable name later when we come to get and set variables within our project.
Now we’ll load the YouTube Player API into the script, and this is a set code snippet provided to us by Google so we just need to add this in verbatim:
var tag = document.createElement(‘script’);
tag.src = “https://www.youtube.com/iframe_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Next we are going to create an event listener function to trigger an action to occur once the API has loaded on the slide.
We do this by typing window.onYouTubeIframeAPIReady = function() and then what is contained within our brackets here is what will load when the API is ready.
If we wish to, we can add an alert at this stage as a debugging measure, just in case we get to a point in our code where we encounter a problem. That way if we don’t see this alert then we know that the API did not load correctly onto the slide.
I’m going to comment this line out using two forward slashes, but feel free to keep this in your project to view the result.
I’m now going to use a querySelector in order to get the video object on the slide in order to assign this to the myvideo variable.
Type var iframe = document.querySelector(‘iframe’);
And then
myvideo = new YT.Player(iframe, {
And this tells the API that the player I want to use is the Web Object we created in Storyline.
With this in place I can now set up some events that I want to trigger actions in Storyline. The first will be onStateChange, whenever the video is played, paused or ended by the user. And also an onReady state which allows us to do different things to the video as soon as it is loaded.
events: {
‘onStateChange’: onPlayerStateChange,
‘onReady’: onPlayerReady
}
});
Let’s now set up two new functions, the first is going to be an onPlayer ready event, and the second will be an onPlayerStateChange event.
We’ll leave the first one empty for now and focus on what states we want things to happen.
Checking the API you can see that each video state is designated a number which we can reference in our code, with 0 being ended, 1 for playing, and 2 for paused.
So let’s crate a set of IF statements, starting with IF the event data is equal to 0, and in curly brackets we will add the Articulate Storyline SET VAR function in order to change our vidStatus variable within our project.
Let’s create a variable just above this in JavaScript with a value of Finished, and add the variable name to our code so that this gets assigned to the project variable.
Now we can go ahead and do the same thing for the other player states using an ELSE IF statement directly after our first IF statement, copying our code, and changing the event data value to 1 and video status value to Playing.
Let’s do that one more time for the Paused state which has an event value of 2.
This is all set to go and is fully functional code, however there’s quite a lot of lines to keep a track of and you might be thinking there must be a better way.
And indeed there is! As if we wanted to we could instead use a Switch Statement in JavaScript by typing switch with our event.data value in brackets, and then we create a case for each value that the event data could be, so starting with case 0 we add in what we want to happen, the same as in our if statements, and then we just need to make sure that we end each case with a break.
That all looks good so we’re now ready to save this and we’ll add a variable reference to our vidStatus project variable onto the slide so we can see this changing as the video plays.
We can now publish our project to see the result. Remember that it’s not possible to activate JavaScript in preview mode in Storyline so we need to publish the project fully to our desktop.
As you can see we can pause and play the video, and the API is sending that data from the video into our Storyline variable. When the video ends we get that variable value of Finished.
So because we know what the variable will change to whenever the video states changes we can use that to build up our automation in Storyline.
Let’s go ahead and add a new trigger to show our Reveal Next Button layer when the variable changes – vidStatus – and add an if statement that the variable contents are equal to “Finished”.
Playing this back now in the browser should make the button animation play once the video has ended.
OK this is all working great, so let’s see what else we can do… How about when the video is paused we show a message on screen that tells the user what time they paused the video.
We created a text variable for this earlier, so I’ll add a new text box onto my slide containing a reference to that variable.
I want to animate it on and off the slide so I’m going to add two animation paths to the text box, and create a new True False variable for storing whether the text box is in an up or down position.
I’ll then set that variable as soon as soon as either the up or down animation has completed, and then I’ll add a move action which will trigger when the vidStatus variable changes, assuming that the video status is playing and the text box is in the up position when I want it to move down, and in the down position and the time variable has changed when I want it to move up.
Let’s go back to our API execute JavaScript trigger now and add some new code when the video is in a paused state.
We’ll use the set variable function in order to set our “currentTime” to the value of myvideo.getCurrentTime open close parenthesis.
This function right here will get the current time of the video at the moment the video is paused and bring this in to Storyline.
Let’s publish again and see the result….
Before we finish up we had a question on this topic from Phil on LinkedIn who was interested in whether it was possible to use the YouTube Player API to play only a small section of a longer video, and that is indeed possible.
To do this we will go back to our API JavaScript and use the onPlayerReady event that we’d prepared earlier.
Into this we will add a new function available from the API called loadVideoByID. This allows us to change the ID value of the video object at the moment that it is loaded, but the function also gives us the ability to define what are the start and end points in seconds for the video. So we can keep the ID value the same as our already loaded video if we don’t actually want to change this.
The most important parts to this are the startSeconds and endSeconds values.
If we publish this you will be able to see the result, and the Finished state actually triggers when we get to the defined video end point too, which is great for our automation management.
But there is a problem however which is that with the player timeline interface here, the user can still simply click out of our defined area of the video to watch whatever they want, and this also breaks them out of the completion state loop.
We can get around this, though not in an ideal way, by adding an additional parameter to our Web Object of controls=0 in order to remove the player controls.
The user can only pause and play the video at this point, so by doing this you may also want to add a slide reload button which displays the moment the vidStatus variable changes to Finished, which allows the user to replay the entire slide.
There’s loads of opportunity to use the YouTube Player API and the functionality it brings in many creative ways, so please go explore and have fun with this in your Storyline projects.
You can of course leave a comment below if you have any questions about what you have seen in this video. And if you’ve been enjoying our Storyline Magic Series so far on YouTube then please do like and subscribe to the Discover eLearning YouTube Channel, and also visit the Discover eLearning website where you will find our advanced Storyline development tutorials that cover scripting languages like JavaScript, and many more courses that are coming very soon.
Thank you and I’ll see you in the next one!