Using multiple web objects in layers - how to stop the video?

Nov 13, 2015

Cheryl Kent
By Cheryl Kent

Hello,

I am creating a sort of video gallery. I have thumbnail images which when clicked will show a layer with a relevant video on it. I have used web objects to add a youtube video to each layer. However if I click the next thumbnail image to show the next layer before a video has finished playing, the first video is continuing and you get audio for both videos - in fact you can get several playing at the same time.

How can I stop a video playing once a layer is hidden?

I have ticked the layer property to hide other layers.

I am intending to have 15 videos/layers on the same slide.

Any assistance appreciated.

41 Replies
Ian O' Leary
almost 7 years ago05/12/17 at 12:43 pm (UTC)

Hi Ashley,

The mp4 files are hosted on Adobe Connect so we have written a custom webpage that displays this content and then link to that page from our WebObject.

We haven't discovered any consistency in the browsers that are experiencing difficulties yet unfortunately. Some students are using IE, others Chrome and others are having the issue on their tablets.

Muting the volume button on the WebObject when the student clicks the button to move onto the next slide would probably do the trick for us but we haven't been able to implement that functinality just yet as my Javascript skills are not the best!

Thanks for your help,

Ian

Ashley Terwilliger-Pollard
almost 7 years ago05/12/17 at 1:08 pm (UTC)

Hi Ian,

I don't know a lot about Adobe Connect, sorry! Are all the MP4 files on the same page there? So that when you access and play one it could actually be playing the others too? 

Your javascript skills are better than mine - guaranteed, as mine are non-existent! Keep us posted if you're able to figure that our and share the solution here. 

360 elearning
over 6 years ago10/11/17 at 11:35 am (UTC)

Hi @ Ashley Terwilliger

We are using storyline 3, and have same issue found in this thread.
Let me Explain, I have embed a youtube video us embed code in a slide layer, when I open up that layer and starts the video and then close it before video come to an end, slide hides but video sound doesnt stop.
I am attaching a sample storyline file here. Plz have look and suggest me some solution (I think it an issue with storyline which should be solved by your development team)
Regards

John Curran
over 6 years ago11/20/17 at 12:04 pm (UTC)

I have the same issue in Storyline 2. Haven't tried it in Storyline 3. Basically you don't appear to be able to stop a video when running as a web object (the only way to stream YouTube videos since the API changed years ago). I'm using multiple layers each with a short video. You can close the layer but the video still runs in the background so you end up with multiple videos running at the same time. You can't use a 'Stop Media' trigger as Storyline doesn't recognise the web object as media.

Any fix?

On the same topic. Will Storyline EVER support YouTube embed again? Why is it so difficult?

Michael Anderson
over 6 years ago11/20/17 at 8:17 pm (UTC)

Check this out and let me know if it's working for you: http://www.andersonelearning.com/demo/Stop_Youtube_Video_When_Layer_Hidden_SL2/story.html

I'm not seeing the video right away even though the audio is playing...Might be something to so with Youtube forcing https. See the attached project file for all the code. I've posted the web object code below in case you don't know how to extract it from the published project.

<!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: 'coOKvrsmQiI'
 });
 }
var storylinePlayer = parent.GetPlayer();
 var playerStaus = storylinePlayer.GetVar("youtubePlayerStatus");
 var myInterval = setInterval(getPlayerStatus, 500);
function getPlayerStatus() {
 playerStatus = storylinePlayer.GetVar("youtubePlayerStatus");
if (playerStatus == "play") {
 player.playVideo();
 }

 if (playerStatus == "pause") {
 player.pauseVideo();
 }
 }
 </script>
</body>
</html>
John Curran
over 6 years ago11/20/17 at 10:29 pm (UTC)

Interesting. In Chrome it takes ages to actually load and start running the video....approximately 45 secs but when you close the layer it stops the video. In Edge the video also takes a while to load but it loads more quickly, however the close layer fails to stop the video. Just shows how the different browsers deal with the content. 

I'll have to find a simpler more robust solution I think.

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