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...
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.
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>
