HTML Object swap with Javascript - Twitch streams

Question

So I'm planning on integrating Twitch streams into a website; embedding each are pretty straightforward, but what I felt would be easier on everyone's bandwidth would be to write some Javascript to show one Stream and press a button to swap attribute values to match others' Twitch account names. So far, what I've come up with has been unsuccessful, which is why I'm here today.

This is what I have come up with so far for the HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Site - Build 1.1.6.5 - Videos Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="scripts/stream-switch.js"></script>
</head>
<body>
<object type="application/x-shockwave-flash" height="540" width="960" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=username1" 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="flashvars" name="flashvars" value="hostname=www.twitch.tv&channel=username1&auto_play=true&start_volume=25" /></object>
<br/>
<button type="button" onclick="User1Stream();">User1's Stream</button>
<button type="button" onclick="User2Stream();">User2's Stream</button>
</body>
</html>

And here's the embedded JS:

function User2Stream()
{
   var StreamObject = document.getElementById("live_embed_player_flash");
   var StreamParameter = document.getElementById("flashvars");
   if (StreamObject != null)
   {
       StreamObject.setAttribute('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=username2');
       StreamParameter = setAttribute('value', 'hostname=www.twitch.tv&channel=username2&auto_play=true&start_volume=25');
   }
}
function User1Stream()
{
   var StreamObject = document.getElementById("live_embed_player_flash");
   var StreamParameter = document.getElementById("flashvars");
   if (StreamObject != null)
   {
       StreamObject.setAttribute('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=username1');
       StreamParameter = setAttribute('value', 'hostname=www.twitch.tv&channel=username1&auto_play=true&start_volume=25');
   }
}

Well, let me know what you think I'm doing wrong here; hopefully it's not too erroneous.

Robbert · Accepted Answer · 2014-06-08T03:42:26.327

0

You have two single quotes after setAttribute( on this line in function User2Stream()

StreamParameter = setAttribute(''value', 'hostname=www.twitch.tv&channel=username2&auto_play=true&start_volume=25');

This should have thrown an unterminated string error in your Javascript console. You repeat the error again towards the end of function User1Stream()

StreamParameter = setAttribute(''value', 'hostname=www.twitch.tv&channel=username1&auto_play=true&start_volume=25');

EDIT

I created a jsFiddle for this. I think setAttribute above should be StreamObject.setAttribute

StreamObject.setAttribute('value', 'hostname=www.twitch.tv&channel=username1&auto_play=true&start_volume=25');

edited Jun 08 '14 at 03:42

answered Jun 05 '14 at 21:06

Robbert

6,481
5
35
61

Ah, I should have seen those syntax errors. Those are fixed now, and while it looks that while you press a button, it refreshes the object, but reverts to User1 on either button. – warezIbanez Jun 05 '14 at 22:28
I added 'return false;' on the next line after StreamParameter on both functions to no avail. – warezIbanez Jun 06 '14 at 01:12
Is `setAttribute` defined somewhere, or should that be `StreamObject.setAttribute`? – Robbert Jun 06 '14 at 04:00
Okay, this change made the switch work correctly. I don't know why I didn't write that the same as before. Thank you for your time! – warezIbanez Jun 08 '14 at 03:00

HTML Object swap with Javascript - Twitch streams

1 Answers1