html - HTML5 视频由页面上的其他图形触发

Question

我试图找出一种方法来显示静态图像，如果视频将在访问者第一次访问我的网页时出现。我想要一个图形按钮，如果单击该按钮将触发视频播放。该图形将在页面上，而不是在视频中或视频顶部。所以，我想我正在寻找如何做两件事。

1. 通过单击页面上的其他图形来播放 html5 视频

2. 播放该视频时，应将静态图形版本换成活动视频版本。理想情况下，一旦播放静态版本将替换视频并重置以再次播放。

对此的任何帮助将不胜感激。谢谢！

Answer 1

这应该可以解决问题，只需确保将“视频”和“图像”指向它们各自的 URL。

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