Question

我正试图找出一种方法来显示静态图像，当访问者第一次访问我的网页时，视频就会出现。我想有一个图形按钮，如果点击将触发视频播放。此图片将不在视频的顶部或顶部。所以，我想我正在寻找如何做两件事。

点击页面上的图片，播放html5视频
播放该视频时，应更换活动视频版本的静态图形版本。理想情况下，一旦播放静态版本将替换视频并重置为再次播放。

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

Answer 1

这应该可以解决问题，只需确保将“视频”和“图片”指向各自的网址。

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

HTML5视频由页面上的图形文件触发

1 个答案: