在視頻背景自動播放後顯示圖像背景

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"); 
});