JavaScript: Changing src-attribute of a embed-tag

Question

I have the following scenario.

I show the user some audio files from the server. The user clicks on one, then onFileSelected is eventually executed with both the selected folder and file. What the function does is change the source from the embedded object. So in a way, it is a preview of the selected file before accepting it and save the user's choice. A visual aid.

HTML

<embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_file">

JavaScript

function onFileSelected(file, directory) {
   jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};

Now, this works fine in Firefox, but Safari and Chrome simply refuse to change the source, regardless of Operating System.

jQuery finds the object (jQuery.size() returns 1), it executes the code, but no change in the HTML Code.

Why does Safari prevent me from changing the <embed> source and how can I circumvent this?

score 24 · Accepted Answer · answered Mar 22 '10 at 16:32

24

You should remove the embed element and reinject it with the new src parameter set.

embed like object and similar are two elements which, due do their special uses (video, audio, flash, activex, ...), in some browsers are handled differently from a normal DOM element. Thus changing the src attribute might not trigger the action you expect.

The best thing is to remove the existing embed object an reinsert it. If you write some kind of wrapper function with the src attribute as parameter this should be easy

answered Mar 22 '10 at 16:32

jitter

53,475
11
111
124

I tried that, but it did not work somehow. It appended the new embed-tag, but did not remove the old one. I am thinking of using a variation of this one with an iframe, but that isn't a very elegant solution. – Mike Mar 22 '10 at 16:50
My problem was that programmatically changing the src and calling play() still caused the original src to be played. Following this advice I now remove and re-add the embed element and the sound plays correctly. Thanks – Scottm Jan 17 '11 at 15:05

score 8 · Answer 2 · edited May 01 '16 at 18:30

I was also facing same issue when I want to change "src"-attribute of "embed" element, so what I did, is given below:

var parent = $('embed#audio_file').parent();
var newElement = "<embed src='new src' id='audio_file'>";

$('embed#audio_file').remove();
parent.append(newElement);

And this will work fine in my application.

Conclusion: - You need to first remove the embed element and then you have to reinsert it with change in src.

score 3 · Answer 3 · answered Apr 06 '21 at 08:15

3

This is a bug in Chrome. Alternative solution is instead of changing src of embed element, try replacing cloned embed with new src

$('embed').replaceWith($('embed').clone().attr('src','anotherfile.swf'));

answered Apr 06 '21 at 08:15

sureshk328

31
2

score 2 · Answer 4 · answered Aug 11 '12 at 20:12

2

There is a bug in Chrome, give it a star to have it fixed sooner: http://code.google.com/p/chromium/issues/detail?id=69648

answered Aug 11 '12 at 20:12

niutech

28,923
15
96
106

score 2 · Answer 5 · answered Oct 22 '19 at 09:06

Add div to embed tag,

 <div id="pdfId">
    <embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_"/>
</div>

In script:

            var pdfId = document.getElementById("pdfId");
            pdfId.removeChild(pdfId.childNodes[0]);
            var embed = document.createElement('embed');
            embed.setAttribute('src', embedUrl);
            embed.setAttribute('type', 'audio/mpeg');
            pdfId.appendChild(embed);

score 1 · Answer 6 · answered Mar 22 '10 at 16:40

1

JQuery follows the CSS-esque declaration:

Instead of doing

function onFileSelected(file, directory) {
   jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};

Rather do

function onFileSelected(file, directory) {
   jQuery('#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};

That way, jQuery only retrieves object of id="audio_file".

answered Mar 22 '10 at 16:40

Buhake Sindi

87,898
29
167
228

seems to me your selector is "less specific" and might have a higher performance hit, can't really see the connection to your quote "CSS-esque declaration"... besides, if you read the OP, it works on some browsers but not all, so it's probably not a syntax error... – Leon Dec 06 '11 at 09:18
@Leon, jQuery bundles the different Javascript implementations into their library so that we (developers) don't have to worry about it. I think it's the internal usage of tags pertaining to some browsers that conflicts, so it can be syntax error. – Buhake Sindi Mar 23 '12 at 14:34

score 1 · Answer 7 · edited Dec 01 '19 at 17:33

var element = document.getElementById('element-embed');
changeSrcEmbed(element,'https://coccoc.com');
function changeSrcEmbed(element, src) {
    var id = element.id;
    element.src = src;
    var embedOld = document.getElementById(id);
    var parent = embedOld.parentElement;
    var newElement = element;
    document.getElementById(id).remove();
    parent.append(newElement);
}

<embed id="element-embed" style="width:1100px; height: 700px;">

JavaScript: Changing src-attribute of a embed-tag

7 Answers7

Linked