綁定播放/暫停/端使用jQuery

Question

功能，HTML5視頻

我試圖綁定使用jQuery play/pause和ended事件，但有一個問題：

我用鼠標右鍵點擊視頻，然後選擇播放或暫停圖標正確更改。當我點擊播放按鈕時，它會變爲暫停，但如果我點擊暫停按鈕繼續播放視頻，它不會再變爲播放。

誰能告訴我我哪裏出錯了嗎？

這裏是我的代碼：

var PlayVideo = function() { 
      if ($('#video').attr('paused') == false) { 
       $('#video').get(0).pause(); 

      } else { 
       $('#video').get(0).play(); 

      } 
     }; 

     $('#playbtn').click(PlayVideo); 
     $('#video').click(PlayVideo); 

     $('#video').bind('play', function() { 
      $('.playbtn').addClass('pausebtn'); 
     }); 

     $('#video').bind('pause', function() { 
      $('.playbtn').removeClass('pausebtn'); 

     }); 

     $('#video').bind('ended', function() { 
      $('.playbtn').removeClass('pausebtn'); 

     }); 

CSS：

.playbtn { 
    display: block; 
    width: 32px; 
    height: 32px; 
    margin-left: 10px; 
    background: url('../images/play.png') no-repeat; 
    opacity: 0.7; 
    -moz-transition: all 0.2s ease-in-out; /* Firefox */ 
    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ 
    -o-transition: all 0.2s ease-in-out; /* Opera */ 
    transition: all 0.2s ease-in-out; 
} 

.pausebtn { 
    display: block; 
    width: 32px; 
    height: 32px; 
    margin-left: 10px; 
    background: url('../images/pause.png') no-repeat; 
    opacity: 0.7; 
    -moz-transition: all 0.2s ease-in-out; /* Firefox */ 
    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ 
    -o-transition: all 0.2s ease-in-out; /* Opera */ 
    transition: all 0.2s ease-in-out; 
} 

Answer 1

沒有pause -attribute對HTML5視頻。相反，你應該看看media events and properties。

在你的情況，這將意味着：

if (!$('#video')[0].paused) { 
    $('#video')[0].pause(); 
} else { 
    $('#video')[0].play(); 
} 

BTW：既然你在呼喚$('#video')漂亮的往往可能是存儲在一個變量是一個好主意 - 這樣你就不必調用jQuery-選擇一個巨大的次數。像：

$video = $('#video'); //from now on just use $video instead of $('#video') 

編輯：關於你的評論這是很難說沒有看到控件（HTML & CSS），你正在使用，但你可以在任何情況下，做的是使用相同的處理程序中的所有事件這觸發了相同的行爲（並且因爲pause上的行爲正確，所以它應該在ended以及綁定到相同處理程序時）。此外，在您發佈的代碼中，您在結束時使用了removeClass（它應該可能是addClass）。所以這應該工作：

$('#video').bind('play ended', function() { //should trigger once on any play and ended event 
    $('.playbtn').addClass('pausebtn'); //might also be $('#playbtn') ??? 
}); 

$('#video').bind('pause', function() { //should trigger once on every pause event 
    $('.playbtn').removeClass('pausebtn'); //might also be $('#playbtn') ??? 
}); 

另一個毛刺我注意到的是，你使用#playbtn一次.playbtn另一個時間。在嘗試使用Play按鈕進行操作時，請確保您指的是相同的項目。