视频播放结束后更改div元素的内容

问题描述

我想知道是否有可能：

我有一部带有“播放”按钮的电影。
点击后，电影开始播放。
电影结束后，我有一张照片覆盖了我的电影部门。

在我的函数中使用哪些选项：

<video src="video.com" id="myVideo">
</video>
<div class="images">
   <img scr="some_pic.jpg" />
</div>


<script type='text/javascript'>
     document.getElementById('myVideo').addEventListener('ended',myHandler,false);
     const img = document.querySelector("img")
     const video = document.querySelector("video")
       function myHandler(e) {
        // Now the video has to hide,and show the img:
          video.style.display = "none:
          img.style.display = "block"
      }
</script>

解决方法

有多种选择，包括将2M标签替换为<video>标签。

我想到的最简单的方法是将图像放置在视频的下面的一层，然后在视频播放完毕后，您可以更改图层（将图像放在最前面，现在将视频放到底层）。

当图像位于视频下方时，它具有相同的尺寸和位置，因此对于最终用户而言，它是不可见的。
通过<image>部分进行设置，其中<style=>是图层位置（较高的数字将其置于较低数字的其他位置之上）。 z-index和top选项是上/下和左/右设置的位置。

您可以尝试使用：
（在下面的代码中，我更改了它们的位置（未对齐），以便可以看到正在发生的事情）...

left

除了在不播放视频时仅显示图像外，我不确定是否还有其他东西，如果不是这样，video标签具有poster属性：

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

html javascript video video