使用jQuery将播放/暂停/结束功能绑定到HTML5视频 [英] Bind Play/Pause/Ended functions to HTML5 video using jQuery

问题描述

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

I am trying to bind play/pause and ended events using jQuery but there is a problem:

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

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?

这是我的代码：

    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;
}

推荐答案

没有 pause -attribute for HTML5 video。相反，您应该看看 媒体事件和属性 。

There is no pause-attribute for HTML5 video. Instead you should have a look at media events and properties.

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

In your case that would mean:

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

BTW：既然你打电话 $（'＃视频'）很多时候，将变量存储起来可能是个好主意 - 这样你就不需要将jQuery选择器调用一个gazillion次。喜欢：

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 = $('#video'); //from now on just use $video instead of $('#video')

编辑：关于您的评论，很难在不看到您正在使用的控件（HTML& CSS）的情况下告诉您，但是在任何情况下您可以执行的操作都是为触发相同行为的所有事件使用相同的处理程序并且由于行为是正确的暂停，它应该在结束以及绑定到同一个处理程序时）。另外，在你发布的代码中，你正在使用 removeClass （其中应该是 addClass ）。所以这应该工作：

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 pause it should be on ended as well when bound to the same handler). Also, in the code you posted, you are using removeClass on ended (where it should probably be addClass). So this should work:

$('#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按钮进行某些操作时，请确保您使用的是相同的项目。

Another glitch i noticed is that you use #playbtn once and .playbtn another time. Make sure you are referring to the same items here when trying to do something with your Play-Button.

这篇关于使用jQuery将播放/暂停/结束功能绑定到HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！