sostituire l'immagine con un video incorporato

Question

Ciao, sto provando a modificare una pagina Web in modo che si carichi più velocemente. Dato che ho alcuni video incorporati (blip.tv ma posso cambiarlo in youtube se aiuta) mi chiedevo se potevi caricare un'immagine dove dovrebbe essere il video e al clic sostituisci l'immagine con il video e inizia a giocare (senza ricaricare il pagina intera). Penso di averlo visto prima, ma non riesco più a trovarlo da nessuna parte! in questo momento il codice da incorporare che uso è:

<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>

Grazie

Answer 1

Veloce e sporco: potresti semplicemente impostare il codice di incorporamento come variabile globale da qualche parte:

<script type="text/javascript">
    var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>

Quindi metti l'immagine in un div contenitore e sostituisci il click interno del contenitore HTML:

<div id="videocontainer">
    <img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>

Answer 2

Esiste un progetto in codice Google chiamato SWFObject, perfetto per quello che ti serve. È una libreria javascript tra browser per il caricamento di flash e potresti usarla per sostituire l'immagine con il video flash, ad esempio quando qualcuno fa clic sull'immagine.