使用 jQuery 将播放/暂停/结束功能绑定到 HTML5 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9874095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bind Play/Pause/Ended functions to HTML5 video using jQuery
提问by coder
I am trying to bind play/pauseand endedevents using jQuery but there is a problem:
我正在尝试使用 jQuery绑定play/pause和ended事件，但有一个问题：
When I right click on the video and select play or pause the icons change correctly. When I click the play button it changes to pause, but if I click the pause button to continue the video it doesn't change to play again.
当我右键单击视频并选择播放或暂停时，图标会正确更改。当我单击播放按钮时，它会变为暂停状态，但如果我单击暂停按钮继续播放视频，它不会变为再次播放。
Can anyone tell me where I am going wrong?
谁能告诉我我哪里出错了？
Here is my code:
这是我的代码：
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:
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;
}
回答by m90
There is no pause-attribute for HTML5 video. Instead you should have a look at media events and properties.
pauseHTML5 视频没有 -属性。相反，您应该查看媒体事件和属性。
In your case that would mean:
在你的情况下，这意味着：
if (!$('#video')[0].paused) {
$('#video')[0].pause();
} else {
$('#video')[0].play();
}
BTW: Since you are calling $('#video')pretty often it might be a good idea to store that in a variable - this way you don't have to call the jQuery-selector a gazillion times. Like:
顺便说一句：由于您$('#video')经常调用，因此将其存储在变量中可能是个好主意 - 这样您就不必无数次调用 jQuery 选择器。喜欢：
$video = $('#video'); //from now on just use $video instead of $('#video')
EDIT:Regarding your comment it is hard to tell without seeing the controls (HTML & CSS) you are using but what you can do in any case is using the same handler for all the events that trigger the same behavior (and since the behavior is right on pauseit should be on endedas well when bound to the same handler). Also, in the code you posted, you are using removeClasson ended (where it should probably be addClass). So this should work:
编辑：关于您的评论，很难在没有看到您正在使用的控件（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') ???
});
Another glitch i noticed is that you use #playbtnonce and .playbtnanother time. Make sure you are referring to the same items here when trying to do something with your Play-Button.
我注意到的另一个故障是您#playbtn一次.playbtn又一次地使用。在尝试使用播放按钮执行某些操作时，请确保您在此处指的是相同的项目。
