html5視頻中的單獨播放/暫停按鈕

Question

我正在組合網站上工作，在每個項目中我都有一個適合屏幕尺寸的HTML5視頻。我也有一個導航欄，停留在頁面的底部。此導航欄包含一個「播放」按鈕，使視頻開始播放。但一旦播放完畢，我無法暫停播放。 （我不想使用視頻控件）

我希望我的播放按鈕在單擊時將「播放」文字變爲「暫停」，當我單擊暫停時，它會暫停（以及文本返回到「播放」）。

另外，當視頻播放結束後，我想讓它返回到海報圖像。

我正在使用video.js。

這裏是我的script.js文件：

（$在後（文件）。就緒（函數（）{）

$('#play').click(function(){ 
    videojs('#bird', { 
      "autoplay": true, 
      "width": '100%', 
      "height": '100%', 
      "preload": 'auto'}, 
      function() { 
       $('.vjs-control-bar').css('display', 'none'); 
       $('.top-header, .info').css('z-index','-1'); 
     }); 

這個網站使類似的東西是什麼我想這個戲/暫停按鈕：http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/2

任何人知道如何解決這個

Answer 1

正如我所看到的琳達HTML5視頻，大約播放/暫停按鈕，只要使用此：

播放/暫停：

var video = document.getElementById("my_video"); 

$("#play_button").bind("click", function(){ 
    video.play(); 
)); 

$("play_toggle").bind("click", function() { 
    if (video.paused) { 
    $(this).html("Pause"); 
    } else { 
    video.pause(); 
    $(this).html("Play"); 
}); 

只需創建一個按鈕和play_button的ID和樣式它。