[removed] 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 sel

Answer 1

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);

Answer 2

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;">

Answer 3

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".

Answer 4

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.

Answer 5

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

Answer 6

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