如何：視頻將在結束後消失並顯示另一個div

我是新來的所以請不要生氣，如果我的問題沒有完全解釋。如何：視頻將在結束後消失並顯示另一個div

我想在標題中加入短視頻，結束後應該消失並顯示下面的div。可能嗎？

這將是一個小動畫圍繞我的網站的標誌和在div我想只把圖片的標誌和導航。

我可以只使用HTML和CSS嗎？或者，也許有人知道任何在線教程？

來源

2015-05-21 Aneta Hajduk

您到目前爲止獲得了哪些代碼？你可以創建一個jsfiddle嗎？ – Andrew

@Aneta，你到目前爲止嘗試過什麼？ – Rayon

顯示您的視頻代碼，以及如何控制？ – Girish

您可以獲取視頻的元數據，之後您可以按如下方式檢查視頻的readyState。

但爲此，您需要編寫一些JavaScript代碼。

var video = document.getElementById('#video_player'); 

video.addEventListener('loadedmetadata', function() { 
    if(video.readyState == video.duration){ 
     $(video).hide(); 
    } 
});

來源

2015-05-21 12:35:24

請嘗試下面的代碼。用您的視頻替換videoplayback.MP4

<html> 
<body> 
    <video id="myVideo" width="320" height="240" controls=""> 
     <source src="videoplayback.MP4" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video> 

    <div id="videoEnd" style="display:none">Video end</div> 

    <script> 
     document.getElementById('myVideo').addEventListener('ended',myHandler,false); 
     function myHandler(e) { 
      if(!e) { e = window.event; } 
      // What you want to do after the event 
      document.getElementById('myVideo').style.display="none"; 
      document.getElementById('videoEnd').style.display="block"; 
     } 
    </script> 

</body> 
</html>

來源

2015-05-21 12:48:31

如何：視頻將在結束後消失並顯示另一個div

回答

相關問題