使用jQuery将播放/暂停/结束的函数绑定到HTML5视频

Question

我正试图使用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

HTML5视频没有pause-属性。相反，您应该查看媒体事件和属性。

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

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')

EDIT:关于您的评论，如果不看到您正在使用的控件（HTML&CSS），很难判断，但在任何情况下，您都可以对触发相同行为的所有事件使用相同的处理程序（由于行为在pause上是正确的，因此当绑定到同一处理程序时，也应该在ended上）。此外，在您发布的代码中，您在end上使用了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另一次。在尝试使用"播放按钮"执行某些操作时，请确保您在此处引用的是相同的项目。