使用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

pauseHTML5视频没有 - 属性.相反,你应该看看媒体事件和属性.

在你的情况下,这意味着:

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

顺便说一句:由于你$('#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按钮执行某些操作时,请确保您在此处指的是相同的项目.