remplacer l'image par une vidéo intégrée

Question

Bonjour, j'essaie de modifier une page Web pour qu'elle se charge plus rapidement. Depuis que j'ai quelques vidéos intégrées (blip.tv mais que je peux le changer en youtube si cela peut aider), je me demandais si vous pouviez charger une image à l'endroit où la vidéo devrait être et cliquer sur remplacer l'image par la vidéo et commencer à jouer (sans recharger la page entière). Je pense avoir déjà vu cela auparavant, mais je ne le trouve plus nulle part! en ce moment, 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 incorporé en tant que variable globale:

<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 l'image dans un conteneur div et remplacez innerHTML du conteneur onclick:

<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 répond parfaitement à vos besoins. Il s'agit d'une bibliothèque javascript inter-navigateurs pour le chargement de Flash. Vous pouvez l'utiliser pour remplacer votre image par la vidéo Flash lorsque quelqu'un clique dessus, par exemple.