L'utilisateur clique sur Image, la vidéo commence à jouer

Question

J'ai une image, et je voudrais faire le lien de l'image à une vidéo YouTube intégrée, de sorte que si l'utilisateur clique sur l'image, il commence à jouer à l'endroit où l'image l'habitude d'être.

<div id="myvideo"> 
    <a href="http://www.youtube.com/watch?v=Msef24JErmU&playnext_from=TL&videos=dgzKE_Lyv7o"> 
    <img src="starryeyedsurprise.jpg"></a> 
</div> 

Quelque chose comme ce que fait le code ci-dessus, sauf pas simplement un lien hypertexte vers celui-ci. Je sais que je dois avoir javaScript remplacer ce qui est en #myvideo avec:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> 

Et puis commencer à jouer automatiquement. Je pense que je n'ai pas besoin que ce soit une vidéo YouTube en tant que telle, je pourrais juste héberger la vidéo sur mon propre site (c'est tellement bas que je n'ai pas à me soucier de faire une vidéo de temps en temps)).

Answer 1

utiliser Just:

$("#myvideo").html('<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>'); 

... comme un gestionnaire onclick. Par exemple:

<a href='javascript:void(0);' onclick='DoVideoSwap();'> ... </a> 

Ceci remplacera le contenu de l'image par la vidéo.

Answer 2

vous pouvez utiliser cette

<script type="text/javascript"> 

    var em = '<video width="640" height="360" controls="controls" autoplay="autoplay"><source src="../video/video.mp4" type="video/mp4"><object data="" width="640" height="360"><embed width="640" height="360" src="http://something.com/video/video.mp4"> </object> </video>'; 

    function playVid() { 
     document.getElementById('videocontainer').innerHTML = em 
    } 
</script> 
<div> 
    <span id="videocontainer" onclick="playVid();"> 
     <sc:FieldRenderer ID="FieldRenderer2" runat="server" key="Title" FieldName="Image" /> 
    </span> 
</div>