Question

I embedded a default media player into my webpage with the following html

<object height='20' width='200'> <embed src='url to music' autostart='false' loop='false' height='20' width='200'> </object>

Everytime I go to the website, this object automatically downloads the music. How can I disable the autodownload? I want it to load only when someone clicks on the play button.

Answer 1

I’ve been looking around today, and I see no way to instruct the browser to do exactly that.

The best way I can think of is instead of the <object ...>, you display an image which looks like the player, then you add an onclick property to the image, and you use javascript to replace the image with the real object. Something like :

  <div><img src='player.png' onclick='this.parentNode.innerHTML = '<object height=\'20\' width=\'200\'> <embed src=\'url-to-music\' autostart=\'false\' loop=\'false\' height=\'20\' width=\'200\'> </object>''></div> 

I should add that you have to keep the <div> around the image (or put a <span>, or whatever tag you see fit) because the onclick action replaces parentNode.innerHTML, that is, the HTML contained in the parent, which in this case, is the image.