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?
Although supported by the browsers, the <embed> is a deprecated HTML tag and is not part of the HTML4 standard.
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.
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.
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.
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;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With