Search code examples
javascripthtmltwitch

HTML Object swap with Javascript - Twitch streams

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.

Solution

  • 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');