用嵌入的视频替换图像 [英] replace image with a video embeded

问题描述

您好我正在尝试修改网页，以便加载速度更快。
由于我嵌入了一些视频（blip.tv，但可以将其更改为youtube，如果有帮助的话），我想知道是否可以在视频应该加载的位置加载图像，然后点击将图像替换为视频并开始播放（无需重新加载整个页面）。
我认为我以前见过这个，但无法在任何地方找到它！
现在要嵌入的代码是：

 < object data =http：// blip。 tv / play / gYMo_vAmAAtype =application / x-shockwave-flashheight =500width =600>< param name =srcvalue =http://blip.tv/play/ gYMo_vAmAA>< param name =allowfullscreenvalue =true>< / object> 
  

谢谢

解决方案 div>

快速和肮脏：您可以将嵌入代码设置为全局变量：

 <脚本类型= 文本/ JavaScript的 > 
 var embedCode ='< object data =http://blip.tv/play/gYMo_vAmAAtype =application / x-shockwave-flashheight =500width =600><< ; param name =srcvalue =http://blip.tv/play/gYMo_vAmAA>< param name =allowfullscreenvalue =true>< / object>'
< ; /脚本> 
  

然后将图像放在容器div中，并替换容器的innerHTML onclick：

 < div id =videocontainer> 
< img src =yourimage.jpgonclick =document.getElementById（'videocontainer'）。innerHTML = embedCode; height =500width =600/> 
< / div> 
  

Hi I'm trying to modify a web page so that it loads faster. Since I have some videos embeded (blip.tv but can change it to youtube if it helps) I was wondering if you could load an image where the video should be and on click replace the image with the video and start playing (without reloading the whole page). I think I've seen this before, but can't find it anywhere anymore! right now the code to embed I use is:

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

Thanks

解决方案

Quick and dirty: you could just set the embed code as a global variable somewhere:

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

Then put the image in a container div and replace the container's innerHTML onclick:

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

这篇关于用嵌入的视频替换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！