Привязка Play / Pause / Ended функций к HTML5-видео с помощью jQuery - PullRequest
Новая
       25

Привязка Play / Pause / Ended функций к HTML5-видео с помощью jQuery

3 голосов
/ 26 марта 2012

Я пытаюсь связать play / pause и ended события, используя jQuery, но есть проблема:

Когда я щелкаю правой кнопкой мыши по видео и выбираю воспроизведение или пауза, значки меняются правильно. Когда я нажимаю кнопку воспроизведения, она меняется на паузу, но если я нажимаю кнопку паузы для продолжения видео, она не переходит на повторное воспроизведение.

Может кто-нибудь сказать мне, где я иду не так?

Вот мой код: 

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

1 Ответ

11 голосов
/ 26 марта 2012

Нет атрибута pause для видео HTML5. Вместо этого вы должны взглянуть на медиа-события и свойства .

В вашем случае это будет означать: 

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

Кстати: поскольку вы звоните $('#video') довольно часто, возможно, было бы неплохо сохранить это в переменной - таким образом вам не нужно вызывать jQuery-селектор несколько раз. Как: 

$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.

...