用户点击图片，视频开始播放答案

【问题标题】：User clicks on Image, video starts playing用户点击图片，视频开始播放
【发布时间】：2010-05-11 21:13:50
【问题描述】：

我有一张图片，我想将图片链接到嵌入的 YouTube 视频，这样如果用户点击图片，它就会在图片原来所在的位置开始播放。

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

类似于上面的代码，除了超链接。所以我知道我必须让 javaScript 将#myvideo 中的内容替换为：

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

然后自动开始播放。我想我不需要它本身就是一个 YouTube 视频，我可以在我自己的网站上托管视频（它的音量太小了，我不必担心每隔一段时间就提供一个视频） .

【问题讨论】：

标签： jquery youtube hyperlink

【解决方案1】：

只需使用：

$("#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>');

...作为onclick 处理程序。例如：

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

这将用视频替换图像内容。

【讨论】：

谢谢乔治！在您的帮助下，我已经接近了一点，我将再次提出这个问题。

【解决方案2】：

你可以用这个

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

【讨论】：