Forum Discussion
Automatically mute audio when playing embedded videos from external sites
Hi all!
Me again with another question about embedded videos from external sites.
I'm struggling with finding a straightforward way to automatically mute audio when a user clicks to play a video that is inserted from an external site (i.e. not uploaded directly into storyline). Trigger wizard doesn't see the video object as media so I can't assign the usual triggers etc to stop the audio when they user clicks to play the video in YT.
The closest I can get is by creating a screenshot of the video with a play button, then uploading the video to autoplay in a layer which does add quite a bit of a workaround, is there anything obvious I might be missing so I don't have to do this for every video in quite a video-content heavy piece of elearning?
Thanks!
I was going to recommend the solution you are already using, ie using a layer.
If the audio is timeline based, you should be able to pause the timeline though as this wouldn't affect web embedded video. They should play independently of each other.
Otherwise, it would be a JavaScript solution to loop through and pause all audio.
Hi SamHill
Thank you so much for your response. The timeline is audio based, but whenever I play the video from web the two play concurrently, and storyline can't see the web object to set a trigger to pause it, I think the layer option might be the only way to set the option to the pause the audio on the baseline that i've found, just wasn't sure if there might be a simpler way to do it, I have a habit of making things more complicated than they need to be sometimes.
Thanks so much for taking the time to respond!
SamHillBeen playing with this all afternoon - looks like YT have amended their embed codes so that autoplay isn't so straightforward any more, can't get it to autoplay when the layer opens unmuted... I can understand why but particularly frustrating in my very specific edge case, heh.
Keen to hear if anyone else has managed to get around this at all.
Am generally unfamiliar with javascript but this might be my last option, any pointers for a newbie?
I would likely opt for the WebObject approach, as it provides easier access to the YouTube API, allowing you to check whether the video is playing, paused, or ended. This method enables you to set Storyline variables as needed, which can then control the timeline based on those variable values. However, this approach involves JavaScript. You can see this method in action here. Let me know if this is an option you'd like to explore, and I'll upload the example used in the demonstration.
Hi Nedim - this looks to be exactly what I want to do! Yes please, if you could upload how you did this, I would be eternally grateful.
Hi Kaylea,
There are two examples to demonstrate this interaction. In Example 1, the timeline automatically pauses when the video starts playing and resumes when the video is paused or stopped. Because the timeline is paused during video playback, the audio tied to it will also pause and resume accordingly. In Example 2, the audio is controlled directly based on the video's state. When the video is playing, the audio pauses, and when the video stops or is paused, the audio resumes. The timeline functionality or status is not affected.To insert your own video, open index.html found in "Example 1" folder, and replace videoId with the ID of your video. If you have changed the variable name in Storyline, make sure to update the variable name accordingly. Ensure that this variable always matches the one used in Storyline. Insert it as WebObject into Storyline.
If you choose to go with Example 2, use the index.html from the "Example 2" folder. Both index.html files are almost identical, but they reference different Storyline variables depending on whether you choose Example 1 or Example 2 for your setup.
Keep in mind that whenever you edit something in the index.html file—whether it's the video ID or a variable name—make sure to rename the folder before inserting it back into Storyline as a web object.Please find the attached zip file, which includes the following:
- Storyline project with two slides, Example 1 and Example 2
- Two folders (Example 1 and Example 2) – Each folder contains an index.html file
Once you open the Storyline file, everything will become clearer. Please don't hesitate to reach out if you need any further assistance or clarification.
