How to change the value of embed src with JavaScript?

Question

I have just begun to learn JS. I am trying to change the value of embed src in the tag present in my HTML code. But am unable to do so with the following code I've written -

HTML -

<ol>
<li><a href="http://embedgames.ru/wp-content/games/kitty-throw.swf" 
    onclick="showGame(this);return false;">Kitty Throw</a></li>
</ol>

<embed id="gameHolder" src="http://pictat.com/i/2011/7/10/32479playscrnba.jpg" 
    quality="high" menu ="false" width="550" height="400" 
    type="application/x-shockwave-flash" 
    pluginspage="http://www.macromedia.com/go/getflashplayer" /></center>

JS:

function showGame(whichgame){var source=whichgame.getAttribute("href");
var game=document.getElementById("gameHolder");
game.setAttribute("src",source);}

I want the JS to display the flash file selected in the gameHolder space which by default holds an image. I am unable to do this with just my beginner knowledge of JS, also please explain the code as you use it.

Can you include some more context, such as relevant HTML or how you actually call this function. Further, have you considered a scripting library such as JQuery or Prototype? — hayesgm, Jul 11 '11 at 06:20
Your code seems to be working find. In which part do you have problem? — Saeed Neamati, Jul 11 '11 at 06:24

score 18 · Accepted Answer · answered Jul 11 '11 at 07:04

18

It may depend on the browser and the type of the embedded object, how you have to change the object(for example there are special methods for flash-movies like Play() , but the object isn't a flash-movie at the begin)

A common way is to replace the whole embed-node with a new <embed>:

function showGame(whichgame){
  var source=whichgame.getAttribute("href");
  var game=document.getElementById("gameHolder");
  var clone=game.cloneNode(true);
  clone.setAttribute('src',source);
  game.parentNode.replaceChild(clone,game)
}

answered Jul 11 '11 at 07:04

Dr.Molle

116,463
16
195
201

1

Thank you SOO much. It worked perfectly. BTW would you mind explaining the cloneNode function... – Jul 11 '11 at 10:51
cloneNode() creates a copy of a node, that's all. The node inside the DOM will be replaced (using replaceChild() )by this copy(after the src-attribute of the copy has been changed). https://developer.mozilla.org/En/DOM/Node.cloneNode – Dr.Molle Jul 11 '11 at 22:21
5

So, I take it changing the `src` attribute of an `embed` has no effect? – rvighne Jul 12 '14 at 04:12
This subject is quite old but still relevant. I've just faced this problem under chrome (while changing the src under firefox works perfectly). The cloning method works very well. Thanks. – Spin0us Sep 12 '22 at 09:11

score 0 · Answer 2 · answered Feb 08 '17 at 18:25

It works also if you change param src only

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
 <EMBED id="movie" src="first.swf" "></EMBED>
</OBJECT>
<ul>
 <li name='moviename'>first.swf</li>
 <li name='moviename'>second.swf</li>
 <li name='moviename'>third.swf</li>
</ul>
<script type="text/javascript">
 var names=document.getElementsByName("moviename");
 for (var i = names.length - 1; i >= 0; i--) {
  names[i].addEventListener("click", myFunction);
  function myFunction() {
      document.getElementById("movie").setAttribute("src", this.innerHTML);
  }
 }
</script>

score -1 · Answer 3 · edited Apr 27 '16 at 13:22

you can set src of embed tag in javascript, for that you must have to write your embed tag in javascript like below example :

function onclickofSomething() {
    $('#IDOfParentElement').html("<embed type='application/x-mplayer2' pluginspage='http:///www.microsoft.com/Windows/MediaPlayer/' src='" + "<%=YourVideoPath%>" + "YourVideoName" + ID + ".mp4/wmv" + "' autostart='1' showstatusbar='1' enabled='1' showdisplay='1' showcontrols='1' width='630' height='380'></embed>");
}

you can also see below url : need to set video file name using javascript http://www.webdeveloper.com/forum/showthread.php?53086-how-to-change-the-src-in-lt-embed-gt-using-javascript http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/16626/how-to-change-the-the-value-of-src-in-embed-using-javascript

How to change the value of embed src with JavaScript?

3 Answers3

Linked