Forum Discussion

ChrisdeWaard's avatar
ChrisdeWaard
Community Member
2 months 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...
advice
community
instructional design
Review 360
storyline 360
Nedim's avatar
Nedim
Community Member
2 months ago

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
2 months ago

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
    2 months ago

    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>

     

Related Content