Audio and Video Overlapping - Storyline 2

Oct 30, 2017

Kim Garcia
By Kim Garcia

Hello,

I am using Articulate Storyline 2 and we have recently run into an issue where the audio and YouTube video (as a web object) overlap if we have both on the same slide. I have tried having both on the same layer, put them on different layers and used triggers, and can't find anything that works. This is driving me crazy because we have built numerous courses before and put both audio and video on the same layer without any issues, but all of a sudden this seems to be popping up.  It is intermittent, so at first I thought it was a browser issue, but it isn't consistently happening (or not happening) in a particular browser and/or OS. If anyone has any thoughts on how to fix this (minus putting on two slides which I will do if there isn't another solution)? 

Here is the link to the a file w/ an example so you can see the issue (maybe - it doesn't show up for everyone). I am also attaching the .story file - it is the same slide 4 times showing 4 different ways that I tried to set it up, each way has the same overlap issue.

https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=632bf9c0-20ad-4627-92cd-3b8e92b4ba98 

Thanks!

4 Replies
Crystal Horn
over 6 years ago10/31/17 at 2:24 pm (UTC)

Hi there, Kim. Thanks for doing the work of troubleshooting some different setups.

In the HTML5 output, when you restart a slide's timeline, the web object video resumed playing along with the audio on the timeline.  So when revisiting the slide, the web object continues playing, even if I change the property to load "when clicked," and change the slide to reset to the initial state when revisited.

The Flash output is behaving as expected.  For now, the workaround is to use a flash-enabled browser to view the content, or to instruct users to pause the YouTube video before restarting the slide.

I'm going to document this behavior for our team so we can decide on next steps.  I'll tag this discussion for follow-up if I get more information I can share with you!

Michael Anderson
over 6 years ago10/31/17 at 4:45 pm (UTC)

Kim, if you embed the Youtube video a little differently (as a web object) you can access its Javascript API and play the video that way. I've created a variable called "youtubePlayerStatus" in the attached project that you can set to "play" when you would like the video to begin. Let me know if that works for you.

Michael Anderson
over 6 years ago11/02/17 at 10:06 pm (UTC)

Kim, the web object is a local html file which contains the code below. Most of the code is directly from Google, but I added a line that checks the value of the Storyline variable youtubePlayerStatus at the line that reads 'if (playerStatus == "play")'. When that variable equals "play" (set by the trigger in Storyline) then the video will begin to play. You could also write code to stop or pause the video, but I'm not sure if you need that in this instance. Please let me know if you have any other questions.

<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
start: '3',
end: '210',
videoId: 'S9-KFZIRp4w'
});
}

var storylinePlayer = parent.GetPlayer();
var playerStaus = storylinePlayer.GetVar("youtubePlayerStatus");
var myInterval = setInterval(getPlayerStatus, 250);

function getPlayerStatus() {
playerStatus = storylinePlayer.GetVar("youtubePlayerStatus");

if (playerStatus == "play") {
player.playVideo();
clearInterval(myInterval);
}
}
</script>

</body>
</html>

 

This discussion is closed. You can start a new discussion or contact Articulate Support.