substituir a imagem com um vídeo incorporado

Question

Oi Eu estou tentando modificar uma página web para que ele carrega mais rápido. Desde que eu tenho alguns vídeos embeded (blip.tv, mas pode alterá-lo para o YouTube se isso ajuda) Eu queria saber se você poderia carregar uma imagem onde o vídeo deveria ser e no clique substituir a imagem com o vídeo e começar a jogar (sem recarregar a página inteira). Eu acho que eu já vi isso antes, mas não pode encontrá-lo em qualquer lugar mais! agora o código para uso incorporar I é:

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

Graças

Answer 1

rápida e suja: você poderia apenas definir o código como um lugar variável global:

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

Em seguida, coloque a imagem em uma div recipiente e substituir innerHTML do contêiner onclick:

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

Answer 2

Há um projeto de código Google chamada SWFObject, que é perfeito para o que você precisa. É uma biblioteca javascript cross-browser para o flash de carga -. E você pode usá-lo para substituir sua imagem com o vídeo de flash quando alguém clica na imagem, por exemplo