Forum Discussion

ChrisdeWaard's avatar
ChrisdeWaard
Community Member
25 days ago

Autoplay more than one embedded video

I am looking for a solution in Storyline 360 to enable autoplay for multiple embedded videos. I managed to get it working for one video, but not for more than one.

I am aware that most browsers have policies in place to block autoplaying videos by default, so I added '&autoplay=1&muted=1', since autoplay is allowed if the video is muted. This works for one video, but the other videos won’t autoplay.

Does anyone know how to bypass this and make all videos autoplay?

Or could the issue be specific to Articulate Review, and does autoplay work correctly after publishing to an LMS?

  • Nedim's avatar
    Nedim
    Community Member

    What have you tried so far? How are you embedding the videos—through a Web Object or by inserting a video from a website? Where is the embedded code from, such as YouTube, Vimeo, etc.? I'd say this is typically handled by the media service API, but I’m not sure how your setup is configured.

    • ChrisdeWaard's avatar
      ChrisdeWaard
      Community Member

      I tried several codes (also background=1&), but without success, I use the embedded code from 'inframe to iframe' which works (only the autoplay doesn't work), and I put the code used so far (which works for autoplay of one video), after thorough research on discussion platforms and so on. It concerns video's on vimeo.

      • Nedim's avatar
        Nedim
        Community Member

        Try importing the attached index.html into a WebObject. Publish it to Web or Review 360.

        Result:

        Edited:
        My zip file did not go through. Please create a folder with the index.html file and paste the code below. Update your video ID's. Then, point the Web Object to that folder.

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Switch Vimeo Videos</title>
          <script src="https://player.vimeo.com/api/player.js"></script>
        </head>
        <body>
          <!-- Vimeo iframes -->
          <div id="iframe1"></div>
          <div id="iframe2" style="display: none;"></div>
        
          <script>
            // Vimeo video IDs
            const video1ID = "xxxxxxxx";
            const video2ID = "xxxxxxxx";
        
            // Create Vimeo Player instances
            const player1 = new Vimeo.Player('iframe1', {
              id: video1ID,
              width: 640,
              autoplay: true,
              muted: true
            });
        
            const player2 = new Vimeo.Player('iframe2', {
              id: video2ID,
              width: 640,
              autoplay: false, // Will autoplay programmatically after the first video ends
              muted: true
            });
        
            player1.on('ended', function () {
              document.getElementById('iframe1').style.display = 'none'; 
              document.getElementById('iframe2').style.display = 'block';
              player2.play(); 
            });
          </script>
        </body>
        </html>