8

I'm trying to dynamically change an embedded video on a page. It's working in Firefox but for some reason it's not working in IE and Chrome (strange combination). Here's the HTML:

   <object id="viewer" width="575" height="344">
        <param name="wmode" value="transparent" />
        <param name="movie" value="http://www.youtube.com/v/Lmn94kn08Lw&hl=en&fs=1&color1=0x006699&color2=0x54abd6&rel=0" />
        <param name="allowFullScreen" value="true" />
        <embed id="embeddedPlayer" src="http://www.youtube.com/v/Lmn94kn08Lw&hl=en&fs=1&color1=0x006699&color2=0x54abd6&rel=0" type="application/x-shockwave-flash" allowfullscreen="true" width="575" height="344" wmode="transparent"></embed>
    </object>

And here's my javascript code. A link is clicked to change the video:

        $("#video a").click(
            function() {
                var videoAddress = $(this).attr("href");
                $("#embeddedPlayer").attr("src", videoAddress);
                return false; // stop the default link so it just reloads in the video player
            }
        );

Like I said the videos are changing perfectly in Firefox but in IE and Chrome nothing happens. Any ideas?

macca1
  • 9,541
  • 9
  • 32
  • 41
  • This has been asked a few days back, and IIRC the recommendation was to use the `SWFPlayer` JS library because of this exact reason. – Pekka Jun 06 '10 at 17:51

2 Answers2

10

Finally figured out something that works in IE, Firefox, and Chrome.

It seems a little unusual to do it this way but it works in IE8/Firefox/Chrome so it sounds good to me.

$("#video a").click(
            function() {
                var videoAddress = $(this).attr("href");

                $("#media-active").html(" ");
                $("#media-active").html('<object id="viewer" width="575" height="344"><param name="wmode" value="transparent" />' +
        '<param name="movie" value="' + videoAddress + '" /><param name="allowFullScreen" value="true" />' +
        '<embed id="embeddedPlayer" src="' + videoAddress + '" type="application/x-shockwave-flash" allowfullscreen="true" width="575" height="344" wmode="transparent"></embed></object>');

                return false; // stop the default link so it just reloads in the video player
            }
);
macca1
  • 9,541
  • 9
  • 32
  • 41
  • Thanks for posting this, been trying for awhile to figure out how to do this, except I'm doing it with an audio src. I haven't seen anyone saying to use the .html() – Precious Roy Jun 30 '11 at 13:36
  • @macca1 Hi there. Very smart code. I try to use your code in my, I try to create a videogallery in my site. Unfortunately I cannot get it to work. That `media-active` you mention, is that a `div`? Or an `object`? Maybe this will help me. Thanks – slevin Sep 27 '13 at 17:31
0

The <embed> tag is used for backwards compatibility. Try to change the param value instead.

$("#viewer param[name=movie]").attr("value", videoAddress);
ZippyV
  • 12,540
  • 3
  • 37
  • 52