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

Question

我想知道这是否可能:

我有一部电影带有播放按钮。
点击后，电影开始播放
电影结束后，我有一张覆盖我电影的照片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>

Answer 1

有多种选择，包括用 <image> 标签替换 <video> 标签。

我能想到的最简单的方法是将图像放在视频下方层上，然后当视频结束时，您可以更改图层（将图像放在前面层，现在视频在后面层）。

当图像在视频下方时，它具有相同的大小和位置，因此 end-user 它是不可见的。
这是通过 <style=> 部分设置的，其中 z-index 是图层位置（数字越大，数字越小）。 top和left选项是up/down和left/right设置的位置。

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

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" width="550" height="400" controls style=" z-index: 2; top: 50px; left: 100px; position: absolute; );">
  <source src="some_video.mp4" type="video/mp4"> 
</video>

<div id="myPic" class="images" width="550" height="400" style=" z-index: 1; top: 80px; left: 140px; position: absolute; );">
    <img src="some_pic.jpg" />
</div>


<script type='text/javascript'>

document.getElementById('myVideo').addEventListener('ended', myHandler, false);
const img = document.getElementById('myPic');
const video = document.getElementById('myVideo');

function myHandler(e) 
{
    // now the video has to hide, and show the img: 
    //video.style.display = "none:
    //img.style.display = "block" 
    
    //# swap their layer positioning
    img.style.zIndex = "2"; //# makes top
    video.style.zIndex = "1"; //# makes bottom

}

</script>
</body>
</html>

Answer 2

我不确定除了在视频未播放时简单地显示图像之外是否还有其他功能，如果不是这样，video 标签具有海报属性：

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

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

Change div element content after the video finish

html

javascript

video