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

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事件，并用<img>元素替换<video>元素。

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