JavaScript function to dynamically change video player source - streaming platform integration

Other Questions Twitch
1

I’m working on a project where I need to embed multiple video streams from a streaming platform on my webpage. Instead of loading all streams at once (which would use too much bandwidth), I want to display one player and use JavaScript buttons to switch between different streamers.

I’ve written some code but it’s not working properly. Here’s my HTML setup:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Stream Selector</title>
<link rel="stylesheet" href="styles.css" />
<script src="js/player-switcher.js"></script>
</head>
<body>
<object type="application/x-shockwave-flash" height="480" width="854" id="video_player_object" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=streamer1" bgcolor="#000000">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param id="player_vars" name="flashvars" value="hostname=www.twitch.tv&channel=streamer1&auto_play=true&start_volume=30" />
</object>
<br/>
<button type="button" onclick="loadStreamer1();">First Streamer</button>
<button type="button" onclick="loadStreamer2();">Second Streamer</button>
</body>
</html>

And here’s my JavaScript code:

function loadStreamer2()
{
   var playerObj = document.getElementById("video_player_object");
   var playerParams = document.getElementById("player_vars");
   if (playerObj != null)
   {
       playerObj.setAttribute('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=streamer2');
       playerParams.setAttribute('value', 'hostname=www.twitch.tv&channel=streamer2&auto_play=true&start_volume=30');
   }
}
function loadStreamer1()
{
   var playerObj = document.getElementById("video_player_object");
   var playerParams = document.getElementById("player_vars");
   if (playerObj != null)
   {
       playerObj.setAttribute('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=streamer1');
       playerParams.setAttribute('value', 'hostname=www.twitch.tv&channel=streamer1&auto_play=true&start_volume=30');
   }
}

Can anyone spot what I’m doing wrong? The stream switching isn’t working as expected.

2

The main issue here is that you’re trying to use Flash-based Twitch embeds which are completely obsolete. Flash was discontinued years ago and modern browsers don’t support it anymore. You need to switch to Twitch’s current iframe embedding method or their JavaScript SDK. For a quick fix, replace your object tag with an iframe and modify your switching functions accordingly. Something like <iframe src="https://player.twitch.tv/?channel=streamer1&parent=yourdomain.com" frameborder="0"></iframe> and then use iframe.src = "https://player.twitch.tv/?channel=streamer2&parent=yourdomain.com" in your JavaScript functions. I ran into this exact problem when updating an old streaming site last year. The iframe approach works much better and is more reliable across different browsers. Just make sure to include your actual domain in the parent parameter or Twitch will block the embed for security reasons.

3

Beyond the Flash deprecation issue, there’s another fundamental problem with your approach. Even if you update the attributes correctly, Flash objects don’t refresh their content when you modify the data parameter dynamically. The Flash player loads once and maintains its internal state regardless of DOM changes. I discovered this when working on a similar multi-stream interface about three years ago. Your setAttribute calls are technically correct but Flash simply ignores them after initial load. You’d need to completely remove the object element from the DOM and recreate it with new parameters, which causes noticeable loading delays and interrupts the user experience. Modern HTML5 video elements or iframe embeds handle dynamic source changes much more gracefully since they’re designed for this kind of interaction. The iframe solution mentioned above is definitely your best path forward for seamless stream switching.

4

honestly your code looks fine syntax-wise but flash objects just dont reload like that. tried something similar few months back and had to completly recreate the whole object element each time which was janky af. maybe try removing the entire object with removeChild() then creating a new one with the updated channel? but seriously just switch to iframe embeds, way easier and actually works in 2024 lol