Is IE The Only Browser (or version) That Does Not

Question

I've tried multiple ways to edit Flash Objects / Embeds via Javascript and it seems to work in everything but IE, so I'm thinking about just throwing IE out the window for this application unless there are older + used version of other browsers that also do not allow you to edit objects. An example of this would be:

document.getElementById(divID).innerHTML = '<object ...><embed ...><\/embed><\/object>';

or in jquery

var params = '<param name="allowFullScreen" value="true" />' +
             '<param name="allowScriptAccess" value="always" />' +
             '<param name="allowNetworking" value="all" />' +
             '<param name="movie" value="player.swf" />' +
$("#objectPlayer").html(params);

If all the rest of the modern browsers and the most used versions of them do support this kind of editing then I'll just scrap IE. And before I get floods of the SWFObject JS Framework, I'm not going to include a huge framework for a browser that I do not believe is going to contain my demographic.

JSFiddle

Here's a link to a JSFiddle I created. It works in all browsers but IE8

Answer 1

If i understand your question and purpose of usage, this is what I would suggest.

I would make use of SWFObject for embedding your SWF onto your HTML page. From there on you can pass flashVars (Object where you can set custom values on) to your SWF. It's not much effort to implement this and it's cleaner in usage (in my opinion). The values of the flashVars can easily be set with PHP values or fill them with plain values.

Have a look at this article for more information about SWFObject and FlashVars and how to use them in ActionScript 3.

Answer 2

Hmmm... strange, the DOM wouldn't update properly in IE8. This is working code. It is ugly and there is plenty of room for optimisation:

<div id="player">
<a href="javascript: void(0)" onclick="build()">Click Me!</a><br />
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" id="twitchTV" width="600" height="368" style="margin:0px;padding:0px">

    <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf?channel=day9tv" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="allowNetworking" value="all" />
        <embed src="http://www.twitch.tv/widgets/live_embed_player.swf?channel=day9tv" quality="high" bgcolor="#ffffff" width="600" height="368"
    name="videoplayer" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
    </object>     

</div>

JS:

function build(){
    // Usually the channels are vars, but this is simplified.
    var data = 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=lzgamertv';   // Object Data
    var html = '<a href="javascript: void(0)" onclick="build()">Click Me!</a><br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" id="twitchTV" width="600" height="368" style="margin:0px;padding:0px"><param name="movie" value="'+data+'" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><embed src="'+data+'" quality="high" bgcolor="#ffffff" width="600" height="368" name="videoplayer" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object>';


     $("#player").html("");
     $("#player").append(html);


}

JSFiddle is here

Answer 3

I believe the <param>part of your code is for <object>.

You have to pass the name/value pairs for embed too.

$("#objectPlayer embed").attr({
    "src": "fileName.swf",
    "name": "fileName",
    "allowFullScreen": "true",
    "width": 200,
    "height": 100,
    "type": "application/x-shockwave-flash"

    //and so on...
    });

But I would use SWFObject anyway, it is the industry standard, it's quite robust and it is the best way of embedding flash on the website.

Answer 4

You can try something like this...

http://jsfiddle.net/eH8cK/

You can actually rewrite the entire contents of the player when you are already rewriting almost most of the contents.

Please try and let me know if it works. Thanks

Answer 5

The only decent alternative to SWFObject that I'm aware of is the jQuery Tools Flashembed plugin which is 3.6k minified (and less when served with compression):

http://jquerytools.org/demos/toolbox/flashembed/index.html

Download link: http://jquerytools.org/download/ The only dependency is jQuery itself.

Answer 6

I had this really weird bug with IE8 in one of my projects, that was very hard to catch - it made Google's excanvas fail if the canvas elements were added using the innerHTML instead of using the document.createElement/document.appendChild.

I fixed it by taking all the canvas elements that were created using the innerHTML, and reacreated them using the DOM's createElement method.

I've noticed similar issues with other 'interactive' elements in IE8, so I'd suggest you try this.

I have no IE8 to test it, but here, try it on jsfiddle