Forum Discussion

KayleaMitchem-'s avatar
KayleaMitchem-
Community Member
2 months ago

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...
  • Nedim's avatar
    Nedim
    2 months ago

    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:

    1. Storyline project with two slides, Example 1 and Example 2
    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.