我有一个图片,我想将图片链接到嵌入的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>
类似于上面的代码所做的事情,除了它的超链接。 所以我知道我必须用#Script替换#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视频,我可以在我自己的网站上托管视频(它的音量非常低,我不必担心每隔一段时间提供一次视频)
答案 0 :(得分:2)
只需使用:
$("#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>
这将用视频替换图像内容。
答案 1 :(得分:0)
你可以用这个
<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>