html - 用嵌入的视频替换图像

Question

您好，我正在尝试修改网页以使其加载速度更快。由于我嵌入了一些视频(blip.tv，但如果有帮助，可以将其更改为 youtube)我想知道您是否可以在视频应该出现的位置加载图像，然后单击用视频替换图像并开始播放(无需重新加载整页)。我想我以前见过这个，但再也找不到了!现在我使用的嵌入代码是:

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

谢谢

Answer 1

快速而肮脏:您可以将嵌入代码设置为某处的全局变量:

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

然后将图片放到一个容器div中，替换容器的innerHTML onclick:

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