視頻結束後顯示播放按鈕

Question

我有一個可能很小的問題。由於我的html5視頻沒有控件（僅限於水平和垂直居中的播放暫停按鈕），因此視頻結束後必須再次顯示。我必須實現這一點。但我不知道如何，我試過了一切。

這裏是我的HTML：

<!-- Video placeholder --> 
    <div class="video-placeholder"> 

     <!-- Video --> 
     <video class="video" controls poster="images/video-poster.png"> 

      <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" /> 

     </video> 
     <!--/Video --> 

     <!-- Play/Pause --> 
     <div class="play-pause"></div> 
     <!--/Play/Pause --> 

    </div> 
    <!--/Video placeholder --> 

這裏的JavaScript的（到目前爲止，我已經嘗試過這一點，但它只是「重新啓動」視頻，但播放暫停按鈕沒有顯示）：

// Video mechanism: 
    $(".video").parent().click(function() { 

     if ($(this).children(".video").get(0).paused) { 

      $(this).children(".video").get(0).play(); 

      $(this).children(".play-pause").fadeOut(); 

     } else { 

      $(this).children(".video").get(0).pause(); 

      $(this).children(".play-pause").fadeIn(); 

     } 

    }); 
    // The end. 


    $(".video").on("ended", function() { 

     $(this).load(); 

    }); 
    // The end. 

非常感謝每一個幫助！

Answer 1

試試這個：

(function showPlayButton() { 
    if (document.getElementById('video-id').ended) { 
     document.getElementById('play-button-id').style.display = 'block'; 
    } 
    setTimeout(showPlayButton, 1000); 
})();