reemplazar imagen con un video incrustado

Question

Hola, estoy tratando de modificar una página web para que se cargue más rápido. Como tengo algunos videos incrustados (blip.tv pero puedo cambiarlo a youtube si me ayuda), me preguntaba si podría cargar una imagen donde debería estar el video y al hacer clic, reemplace la imagen con el video y comience a reproducir (sin volver a cargar el toda la pagina). ¡Creo que he visto esto antes, pero ya no puedo encontrarlo en ningún lado! en este momento el código para insertar que uso es:

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

Gracias

Answer 1

Rápido y sucio: puede configurar el código de inserción como una variable global en algún lugar:

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

Luego coloque la imagen en un contenedor div y reemplace el innerHTML onclick del contenedor:

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

Answer 2

Hay un proyecto de código de Google llamado SWFObject, que es perfecto para lo que necesita. Es una biblioteca de JavaScript de navegador cruzado para cargar flash, y podría usarla para reemplazar su imagen con el video flash cuando alguien hace clic en la imagen, por ejemplo.