使用jQuery将播放/暂停/结束function绑定到HTML5video

我试图使用jQuery绑定play / pause和ended事件，但有一个问题：

当我右键单击video并选择播放或暂停时，图标会正确更改。 当我单击播放按钮时，它会更改为暂停，但如果我单击暂停按钮继续播放video，则它不会更改为再次播放。

谁能告诉我哪里出错了？

这是我的代码：

  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

HTML5video没有pause属性。 相反，你应该看看媒体事件和属性 。

在你的情况下，这将意味着：

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

BTW：因为你经常调用$('#video')所以将它存储在变量中可能是个好主意 – 这样你就不必多次调用jQuery-selector。 喜欢：

 $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按钮执行某些操作时，请确保您在此处指的是相同的项目。