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

我想在播放视频背景后显示照片背景；我已经尝试在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>

（功能（）{
/**
*视频元素
*@type{HTMLElement}
*/
var video=document.getElementById（“我的视频”）；
/**
*检查视频是否可以播放，并播放
*/
video.addEventListener（“canplay”，函数（）{
video.play（）；
});
})();

您可以绑定到视频

结束

事件，并用

元素替换

元素

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

---

您是否尝试为“End”添加侦听器并隐藏视频元素并显示图像？