Question

我是新来的，所以如果我的问题没有得到完美解释，请不要生气。

我想把简短的视频放在标题中，在它之后它应该消失并显示下面的div。可能吗？

这将是我网站徽标周围的一个小动画，在div我只想放置徽标和导航的图片。

我只能使用HTML和CSS吗？或者也许有人在网上知道任何教程？

Answer 1

请尝试以下代码。将videoplayback.MP4替换为您的视频

<html>
<body>
    <video id="myVideo" width="320" height="240" controls="">
      <source src="videoplayback.MP4" type="video/mp4">
      Your browser does not support the video tag.
    </video>

    <div id="videoEnd" style="display:none">Video end</div>

    <script>
         document.getElementById('myVideo').addEventListener('ended',myHandler,false);
        function myHandler(e) {
            if(!e) { e = window.event; }
            // What you want to do after the event
            document.getElementById('myVideo').style.display="none";
            document.getElementById('videoEnd').style.display="block";
        }
    </script>

</body>
</html>

Answer 2

您可以访问视频的元数据，之后您可以按如下方式检查视频的readyState。

但为此您需要编写一些JavaScript代码。

var video = document.getElementById('#video_player');

video.addEventListener('loadedmetadata', function() {
    if(video.readyState == video.duration){
      $(video).hide();
    }
});

如何：视频结束后会消失并显示另一个div

2 个答案: