Modifying a Twitch embed object's data and parameter values using JavaScript

Other Questions Twitch
1

Hello everyone! I’m currently trying to update the properties of an object and change a parameter’s value within the Twitch embed code. I’m not very experienced with JavaScript and would really appreciate some assistance. I have looked into it, but I haven’t found a solution yet. Any help would be greatly appreciated!

Here is the original embed code I need to modify (it’s untouched):

<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=thelifeisyours" 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 name="flashvars" value="hostname=www.twitch.tv&channel=thelifeisyours&auto_play=true&start_volume=25" />
</object>

I have created this JavaScript function so far, but it’s not working:

function changestream1(){
    var streamIn = document.getElementById('stream1').value;
    var objData= document.getElementById('live_embed_player_flash');
    var param = document.getElementById('param');

    objData.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + streamIn);
    param.setAttribute("value", "hostname=www.twitch.tv&channel=" + streamIn + "&auto_play=true&start_volume=25");
}

The purpose of this function is to dynamically set the new data for the embedded object and update the parameter values. If you need to see a demonstration of my thought process, feel free to check out this link: JsFiddle. I’m also sharing the site where this will be implemented: twitchgrabber.

2

Your code has a fundamental problem with how you’re handling the object element. Flash embeds are finicky when you modify them dynamically. I hit this exact issue two years ago working on a similar stream switching feature. The problem is once Flash loads, changing parameters through JavaScript won’t trigger a reload of the Flash content. You’ve got to completely remove the object element and recreate it with new parameters. Remove the entire object from DOM, update the HTML with your new channel value, then re-insert it. Better yet - since Twitch ditched Flash anyway, switch to their newer iframe-based embed system. It handles dynamic updates way better. That Flash widget you’re using is pretty outdated now.

3

I had the same issue with dynamic Twitch embeds. Your problem is document.getElementById('param') won’t work - you’ve got multiple param elements but only one has an ID. You need to target the flashvars parameter specifically.

Try this:

function changestream1(){
    var streamIn = document.getElementById('stream1').value;
    var objData = document.getElementById('live_embed_player_flash');
    var flashvarsParam = objData.querySelector('param[name="flashvars"]');
    
    objData.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + streamIn);
    flashvarsParam.setAttribute("value", "hostname=www.twitch.tv&channel=" + streamIn + "&auto_play=true&start_volume=25");
}

The difference is using querySelector to find the specific param element with name=“flashvars”. This hits exactly what you want to modify instead of trying to grab a generic param element.

4

Yeah, querySelector works but you’re missing the movie param! You’re updating the object’s data attribute, but the movie param needs the channel variable too or it won’t load. Just grab it with objData.querySelector('param[name="movie"]') and set the value to include your streamIn variable.