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

Nov 13, 2015

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
Katie Bush

I am also having this issue.  The situation is that the videos are web object YouTube "links" not mp4 (or similar) video media files.

The "workaround" I have is to not use the YouTube links and instead just use the original mp4s, but every mp4 I insert increases the Storyline file size.  The reason we moved to YouTube clips is to reduce the file size (I moved from a 100 MB file to a 4 mb file!).

If anyone has a suggestion, I'd love to hear it.

Katie Bush

The problem isn't getting the YouTube videos in there.  It seems that Cheryl and I both used the "Insert | Web Object" to put the YouTube videos in our courses.

The problem is putting YouTube web objects on a layer.  When the layer appears, the user can start playing the video (or it auto plays).  Then if the user clicks the trigger object to hide the layer before the video is finished playing, the video continues to play.  You only hear the audio because the visual is hidden.

For example in my course, I have a button that shows a layer when clicked. This layer has YouTube video and a close button.  The close button hides the layer again when clicked.  If the user starts playing the video, then clicks the close button, the layer hides, but the video keeps playing. 

The one way I found to not have this happen is to Insert the MP4 as a video file (using Insert | Video).  Because Storyline recognizes it as a video, I can use the media triggers such as the Stop Media that Ashraf indicated above.  The problem with dropping a bunch of MP4s in there is that my file size gets large quick (this course has 8 videos).  

I also found that I could get a similar interaction to a layer by using a lightbox slide, which seems to stop the YouTube video from playing when the user clicks the red X.  This stopping seems to be simply because the user is being moved from slide to slide, and therefore from timeline to timeline.  Using the lightbox way is not as nice looking, but it might have to suffice.

Cheryl - I'm not sure if the lightbox way would look okay for you course or not, the slide appears as an overlay on the whole player window and is much smaller than the original slide. It might be worth some looking into to see if it will get you close enough.

Ashley Terwilliger-Pollard

Hi Katie,

Thanks for sharing that explanation here. Could you share your .story file with this web object and layer so that we could take a look at how it's behaving and how you've got it set up? If you're ok using the lightbox method, no need to share - but I'd be curious to see how you've set it up and what isn't working. You can attach it here using the "add attachment" button to include it in the thread. 

Cheryl Kent

Hi,

ok here is my file - I have stripped out most of my stuff and just have the filmstrip slide. However it is by no means complete as I hit the problem as I started testing to check the bits work.

So, basically the intention is to have a strip of thumbnail images down the left-hand-side (which the user can scroll thru). As you click each thumbnail the layer with the relevant video should appear. At the moment I only have 3 videos set up.

The videos are on our youtube channel here https://www.youtube.com/user/healthlib

If there is someway to get this working that would be super as I think this would be a good way to present some of our demonstration-type videos too.

Thanks for your help.

Ashley Terwilliger-Pollard

Hi Cheryl,

Thanks for sharing your file and the link to your YouTube page. I tested this by uploading to my Articulate Online account as I wasn't sure where you were testing, and I could click around from video to video and it stopped them and I was able to only hear the audio while on that layer. Can you take a look at this version and let me know how it behaves for you? I'm also testing in Chrome. 

Alexander Reid

Any updates on this problem?  I'm experiencing the EXACT same thing.

Unfortunately my pitiful LMS cannot stream MP4 to mobile devices (took like 2 months for them to confirm this) so I am forced to embed Youtube links into web objects.  I have a slide with multiple layers where every layer represents a video.  If the user wants to exit the video and return to the list of videos, they simply press an "X" object which is linked to the trigger of "hide this layer".  The layer disappears, but unfortunately the audio of the video continues in the background.

Cheryl Kent

Hi Alexander,

I did find that the lightbox idea suggested by Katie above worked for me - you might want to try this. My videos were simple talking heads so it looked OK.

Otherwise as Leslie mentioned I was running it in an environment that wouldn't be the "proper" production environment, so I am assuming that this would make a difference.

Nathan Hartwick

I too used the lightbox slide technique with some embedded Vimeo videos.

Originally I had buttons calling slide layers to show the embedded Vimeo videos and that worked for the flash output, but many of the users for my activity will be accessing it from a tablet so HTML5 is what was needed and that output did not work. The videos kept playing in the background. The lightbox technique, instead of slide layers, worked like a charm.

And if you don't care for the tiny little red x used to close the lightbox you can create your own button and trigger to close it instead.

Ian O' Leary

I'm having the same issue as Alexander. I have a WebObject mp4 video on one slide which can sometimes continue to play even when I've moved on to the next one. Then when another WebObject slide is played I have two audios playing at once.

This seems to happen on some PCs but not others. I'm not experiencing the issue on my machine but many of my students are.

Is there any solution to this yet?

Thanks!

Ian

Ashley Terwilliger-Pollard

Hi Ian,

I haven't seen any other examples for using multiple web objects - but you could always use the "contact me" button on a ELH users' profile to reach out to them directly and see if they could offer insight. This discussion is a bit older so they may not be subscribed. 

Best of luck with your project! 

Ian O' Leary

Thanks for the reply Ashley,

Would it be unusual to have a project that has a number of WebObject slides that play an mp4 video hosted elsewhere? I would have thought this would be a pretty common approach to building a course?

It's unfortunate as most of our eLearning material uses this approach (each course could have 15 to 20 WebObject mp4s scattered throughout). The multiple audio tracks at once is making them unwatchable for students.

If I could find someway to mute the volume on the WebObject video player I think my problems would be solved!

Thanks again,

Ian

Ashley Terwilliger-Pollard

Hi Ian,

Not unusual at all - I think I read this as multiple web objects on one slide, but it sounds like you have the spaced over multiple slides? Where are you hosting the content? What browser(s) are you viewing it in? I wonder if that's impacting how the audio keeps playing in the background. 

Muting the volume on the web object player could be an option - but something I'd have to defer to the community for! Let us know what you come up with in that regard. 

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