Forum Discussion
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?
- NedimCommunity 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.
- ChrisdeWaardCommunity 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.
- NedimCommunity 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>