Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript: Changing src-attribute of a embed-tag

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?

like image 228
Mike Avatar asked Mar 22 '10 15:03

Mike


People also ask

Is embed tag deprecated?

Although supported by the browsers, the <embed> is a deprecated HTML tag and is not part of the HTML4 standard.

What is embed src?

The HTML <embed> src Attribute is used to specify the web address of the embedded content. Syntax: <embed src="URL"> Attribute Values: URL: It is used to specify the web address of the embedded content.

How does embed tag work?

The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.


2 Answers

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.

like image 194
Durgaprasad Budhwani Avatar answered Oct 05 '22 22:10

Durgaprasad Budhwani


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;">
like image 45
Dũng Phạm Tiến Avatar answered Oct 05 '22 22:10

Dũng Phạm Tiến