在视频背景自动播放后显示图像背景

Question

我想在播放视频背景后显示照片背景;我尝试在css中添加背景图像，但在视频结尾处，现在显示图像。

以下是代码：

<video id="my-video" class="video" autoplay>
  <source src="media/demo.mp4" type="video/mp4">
  <source src="media/demo.ogv" type="video/ogg">
  <source src="media/demo.webm" type="video/webm">
</video>

<script>
  (function() {
    /**
     * Video element
     * @type {HTMLElement}
    */
    var video = document.getElementById("my-video");

    /**
     * Check if video can play, and play it
    */
    video.addEventListener("canplay", function() {
      video.play();
    });
  })();
</script>

Answer 1

您可以绑定到视频ended事件，并将<video>元素替换为<img>元素。

video.addEventListener("ended",function(){
  //For example:
  video.classList.add("hide");
  backgroundImg.classList.remove("hide");
});