HTML5 Video Triggered by a graphic elswere on the page

Question

I am trying to figure out a way to have a static image appear were the video will be when a visitor first comes to my webpage. I would like to have a graphic button that if clicked will trigger the video to play. This graphic would be elswere on the page not in or on top of the video. So, I guess I am looking for how to do 2 things.

1. Play an html5 video by clicking a graphic elswere on the page

2. When that video is played it should swap out the static graphic version for the active video version. Ideally, once played the static version would replace the video and be reset to play again.

Any help with this would be greatly appreciated. Thanks!

Answer 1

This should do the trick, just make sure to point 'video' and 'image' to their respective URLs.

<script>
    function doVideo()
    {
        var video = "myvideo.mp4";
        document.getElementById("videoimgdiv").innerHTML = "<video autoplay onended=\"doImage()\"><source src=\"" + video + "\"\></video>";
    }

    function doImage()
    {
        var image = "http://us.123rf.com/400wm/400/400/podlesnova/podlesnova0906/podlesnova090600034/5117393-small-red-furry-kitten-with-blue-eyes.jpg";
        document.getElementById("videoimgdiv").innerHTML = "<img onclick=\"doVideo()\" src=\"" + image + "\"/>";
    }

</script>

<div id="videoimgdiv">
  <img onclick="doVideo()"src="http://us.123rf.com/400wm/400/400/podlesnova/podlesnova0906/podlesnova090600034/5117393-small-red-furry-kitten-with-blue-eyes.jpg" />
</div>