Change src attribute

Question

I want to change the src attribute of an embed object. I have:

<embed class="flash "id="flash" src="swf/pano.swf?panoSrc=images/a.jpg" 
                     allowFullScreen="true" 
                     width="1280" height="640" quality="high" 
                     pluginspage="http://www.macromedia.com/go/getflashplayer" 
                     type="application/x-shockwave-flash" bgcolor="#DDDDDD"/>

and I've tried

function change() 
{
   document.getElementById("flash").setAttribute('src', 'swf/pano.swf?panoSrc=b.jpg');
}

but it didn't work in Chrome, "only" in Firefox, IE and Opera. How can I fix it (to make it work in Chrome)? Did I do anything wrong?

EDIT: here is the whole HTML file

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function change() {
            document.getElementById("flash").setAttribute('src', 'swf/pano.swf?panoSrc=a.jpg');
        }
    </script>

</head>
<body>


    <embed class="flash" id="flash" src="swf/pano.swf?panoSrc=images/sau.jpg" allowFullScreen="true" 
                     width="1280" height="640" quality="high" 
                     pluginspage="http://www.macromedia.com/go/getflashplayer" 
                     type="application/x-shockwave-flash" bgcolor="#DDDDDD"/>

     <script>
         change();
     </script>

</body>

Link to the page: http://chin.comli.com/test.html

score 3 · Answer 1 · answered Oct 19 '12 at 00:22

3

You need to invoke your function.

change();

Working demo: http://jsfiddle.net/LUfUx/

answered Oct 19 '12 at 00:22

AlienWebguy

76,997
17
122
145

Needs to be after the `embed` so that the `document.getElementById` will be able to find it in the code. – Maverick Oct 19 '12 at 00:28
1

Yep, what bree said. Right before the closing
tag is usually the best
– AlienWebguy Oct 19 '12 at 00:29
it didn't work in Chrome, "only" in Firefox, IE and Opera. Here's the link: http://chin.comli.com/test.html – Chin Oct 19 '12 at 01:36

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

~~Move your script call to be AFTER the code it's intended to affect, or put it in a window.onload call. As you have it it's trying to execute on an element before it exists.~~

Long story short, based on Changing object embed source via jquery, Dynamically change embedded video src in IE/Chrome (works in Firefox), JavaScript: Changing src-attribute of a embed-tag, and http://code.google.com/p/chromium/issues/detail?id=69648, it looks like this is a bug in Chrome and the only workaround is to remove the entire <embed> element, and then re-insert it with the changed src.

edited May 23 '17 at 12:27

Community

1
1

answered Oct 19 '12 at 00:26

j08691

204,283
31
260
272

I see. But even after doing that it still doesn't work. I edited the code. Is that what you mean? – Chin Oct 19 '12 at 00:29
Don't use webmatrix to fix this, debug it in Chrome or Firefox and use the built in dev tools or a plugin to see any errors. As you can see by this fiddle, http://jsfiddle.net/j08691/AJDuY/, the code works, so there's something else going on. – j08691 Oct 19 '12 at 00:32
oh, I just found out that it works in firefox, but not in Chrome, and I always use Chrome to preview the result. Pretty weird... – Chin Oct 19 '12 at 00:37
how can I use the dev's tool in Chrome? Sorry I'm a total newbie – Chin Oct 19 '12 at 00:42
Hit F12 to open them and choose the console. Then reload the page. – j08691 Oct 19 '12 at 00:43
After reloading the page the console is still blank and doesn't show anything – Chin Oct 19 '12 at 00:44
Is your page public? If it works in most other browsers it should work in Chrome. Try clearing the cache etc and restarting Chrome. – j08691 Oct 19 '12 at 00:46
Here is the link:http://chin.comli.com/test.html You can try it in chrome and firefox to see the difference – Chin Oct 19 '12 at 01:35
This may be more of a flash embed code issue than a script issue. The code runs fine in Chrome and changes the source but it appears as if the embed isn't working properly. – j08691 Oct 19 '12 at 01:40
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18266/discussion-between-chin-and-j08691) – Chin Oct 19 '12 at 01:40

score 0 · Answer 3 · answered Oct 19 '12 at 00:18

0

Try this

function change() {
   document.getElementById("flash").src =  'swf/pano.swf?panoSrc=b.jpg';
   // OR  document["flash"].src =  'swf/pano.swf?panoSrc=b.jpg';
}

answered Oct 19 '12 at 00:18

Sushanth --

55,259
9
66
105

Why not remove the embed tag.. Insert the new source and inject it into your DOM again.. Maybe that might help – Sushanth -- Oct 19 '12 at 00:22
Also check this http://stackoverflow.com/questions/2493706/javascript-changing-src-attribute-of-a-embed-tag – Sushanth -- Oct 19 '12 at 00:22

Change src attribute

3 Answers3