Remplacer l'image par une vidéo incorporée

Question

Bonjour J'essaie de modifier une page Web pour qu'elle se charge plus rapidement. Depuis que j'ai des vidéos embarquées (blip.tv mais peut le changer en youtube si ça aide) je me demandais si vous pouviez charger une image là où la vidéo devrait être et cliquez sur remplacer l'image avec la vidéo et commencer à jouer (sans recharger toute la page). Je pense que j'ai déjà vu ça, mais je ne le trouve plus nulle part! dès maintenant le code à intégrer que j'utilise est:

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

Merci

Answer 1

rapide et sale: vous pouvez simplement définir le code embed comme une variable globale quelque part:

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

Ensuite, placez le image dans un conteneur div et remplacez le conteneur innerHTML sur le clic:

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

Answer 2

Il existe un projet de code Google appelé SWFObject, qui est parfait pour ce dont vous avez besoin. C'est une bibliothèque javascript cross-browser pour charger le flash - et vous pouvez l'utiliser pour remplacer votre image avec la vidéo flash quand quelqu'un clique sur l'image, par exemple.