绑定播放/暂停/端使用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按钮进行操作时，请确保您指的是相同的项目。