Flash object data attribute updates properly in Firefox but fails in Chrome and IE

Other Questions Twitch
1

I have a video streaming application that switches between different channels using jQuery to update Flash player parameters. The functionality works perfectly in Firefox, but I’m experiencing issues with Chrome and Internet Explorer where the Flash object doesn’t refresh properly when I change the data attribute.

JavaScript Code:

$(document).ready(function() {
    var currentChannel = $("#channel-selector .selected").first().attr("data-channel");
    $("#video_player_object").attr("data", "https://player.example.com/flash_player.swf?stream=" + currentChannel);
    $("#player_params").val("server=player.example.com&stream=" + currentChannel + "&autoplay=true&volume=0");

    $("#channel-selector .channel-item").click(function(){
        $("#channel-selector .selected").removeClass("selected");
        $(this).addClass("selected");
        var newChannel = $(this).attr("data-channel");
        $("#video_player_object").attr("data", "https://player.example.com/flash_player.swf?stream=" + newChannel);
        $("#player_params").val("server=player.example.com&stream=" + newChannel + "&autoplay=true&volume=50");
    });
});

HTML Structure:

<div id="channel-selector">
   <div class="channel-item selected" data-channel="main-broadcast"></div>
   <div class="channel-item" data-channel="secondary-stream"></div>
   <div class="channel-item" data-channel="backup-feed"></div>
</div>

<div id="video-container">
    <object type="application/x-shockwave-flash" height="600" width="800" id="video_player_object" data="" bgcolor="#000000">
        <param name="allowFullScreen" value="true" />
        <param name="allowScriptAccess" value="always" />
        <param name="wmode" value="transparent" />
        <param name="movie" value="https://player.example.com/flash_player.swf" />
        <param name="flashvars" value="" id="player_params" />
    </object>
</div>

Any suggestions on how to make this cross-browser compatible?

2

yeah, chrome handles flash differently than firefox. add a timestamp param to force a reload: ?stream= + newChannel + &t= + Date.now(). this fixes it when browsers cache the swf file. also make sure u’re updating both the data attribute AND the movie param - some browsers ignore one or the other.

3

Hit the same issue with Flash video players a few years ago. Chrome and IE don’t handle Flash object updates the same way Firefox does. Just changing the data attribute won’t reload the Flash content in those browsers.

I fixed it by forcing a complete re-init of the Flash object. Don’t just update attributes - remove the entire object element from the DOM and recreate it with new parameters. Store your object HTML as a template string, update the parameters, then replace the whole container content with jQuery’s html() method.

You could also try calling the Flash player’s internal reload method if it exposes one through ExternalInterface, but the DOM replacement approach works better across different Flash players and browser versions.