4

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

Maurizio Pozzobon
  • 3,044
  • 7
  • 34
  • 44

2 Answers2

4

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>
Mark Bell
  • 28,985
  • 26
  • 118
  • 145
  • I had the similar issue and tried to run it, however, it does not work. The clicking on the image does not cause any event. What can be the problem? – MichalB Apr 03 '13 at 08:59
  • Just about anything could be the problem when the error description is so vague... are your HTML element IDs the same as those above? Do you get any script errors in your browser's JavaScript console when you click the image? Please post a new question, including the exact HTML/JS code you are using (along with any JavaScript error messages)—that way we will have a much better chance of figuring out your problem. – Mark Bell Apr 03 '13 at 13:04
0

There's a Google code project called SWFObject, which is perfect for what you need. It's a cross-browser javascript library for loading flash - and you could use it to replace your image with the flash video when someone clicks on the image, for example.

Fenton
  • 241,084
  • 71
  • 387
  • 401