In a previous post, I showed how to add a YouTube video in Storyline via YouTube iframe API. This is a simple implementation of the same concept WITH a TWIST.

One clip is from YouTube, the other is local. You can control the YouTube video from inside Storyline but also detect when it’s stopped/paused or when it ends. This allows you to sync it with other things like another video. Besides, this example will challenge you visual imagination…

SONG #1: http://rabbitoreg.com/guess80/song1/story.html

SONG #2: http://rabbitoreg.com/guess80/song2/story.html

Watch TruScribe in action, and try to guess the song from the 80’s… More songs are on the way.

How does Storyline know when you pause the YouTube video?

The YouTube iFrame API calls this function when the player’s state changes.
When the video is over you pause, it calls this function. It also sends some info, called “event”.
This helps you figure out what state has changed.

Since this is in an iframe, and Storyline has the “parent frame,”
you can call Storyline’s /story_content/user.js funcions by referring to them as parent.WhatEverYourFunctionIs.

See full example, source and comments in my previous post.

var done = 0;
var paused = 0;

function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.ENDED && !done) {
parent.ended();
done = 1;
}

if (event.data == YT.PlayerState.PAUSED && !paused) {
parent.doPause();
paused = 1;
timepaused=Math.round(player.getCurrentTime()); // This is to save the timestamp when pause happened.

}
if (event.data == YT.PlayerState.PLAYING && paused) {
parent.doContinue();
paused = 0;
timerest+=(Math.round(player.getCurrentTime()-timepaused)); // This is to figure out how long it was paused. You only need this if it matters how long you pause the video.
}

}