Lier lecture/Pause/Clos des fonctions vidéo HTML5 à l'aide de jQuery

Je suis en train de lier play/pause et ended événements à l'aide de jQuery, mais il y a un problème:

Quand je clique droit sur la vidéo et choisissez de jouer ou mettre en pause le changement des icônes correctement. Quand je clique sur le bouton play il des changements à la pause, mais si je clique sur le bouton pause pour continuer la vidéo, il ne change pas de jouer à nouveau.

Quelqu'un peut me dire où je vais mal?

Voici mon 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:

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

OriginalL'auteur coder | 2012-03-26

  1. 11

    Il n'y a pas de pause-attribut pour la vidéo HTML5. Au lieu de cela, vous devriez avoir un coup d'oeil à des événements médiatiques et des propriétés.

    Dans votre cas, cela voudrait dire:

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

    BTW: Depuis que vous appelez $('#video') assez souvent, il pourrait être une bonne idée afin de la stocker dans une variable de cette façon, vous n'avez pas à appeler le jQuery-sélection d'une foule de fois. Comme:

    $video = $('#video'); //from now on just use $video instead of $('#video')

    EDIT: au Sujet de votre commentaire, il est difficile de dire sans voir les contrôles (HTML & CSS) que vous utilisez, mais ce que vous pouvez faire dans tous les cas est d'utiliser le gestionnaire de même pour tous les événements qui déclenchent le même comportement (et puisque le comportement est à droite sur pause il devrait être sur ended ainsi quand il est lié à la même gestionnaire). Aussi, dans le code que vous avez posté, vous êtes à l'aide de removeClass sur terminé (où il devrait probablement être addClass). Donc, cela devrait fonctionner:

    $('#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') ???
});

    Un autre problème que j'ai remarqué, c'est que vous utilisez #playbtn une fois et .playbtn un autre temps. Assurez-vous que vous vous référez à la même ici en essayant de faire quelque chose avec votre Play-Bouton.

    pour le mentionner.Désolé c'est une faute de frappe erreur.Alors, comment puis-je changer l'icône après la fin de la vidéo.Comme après avoir cliqué sur le jeu btn ça change mais encore une fois ce n'est pas le basculement.
    J'ai mis à jour avec mon css partie où je suis ajoutant des icônes.
    Outre le fait que vous pouvez réduire la deuxième classe à la background: ligne (le reste est le même) le CSS semble ok. Avez-vous vérifié si un. le ended événement vraiment incendies et b. si la nouvelle background règle n'est pas remplacé par un autre style?
    Tout fonctionne bien Si je clic droit sur la vidéo, mais le problème est avec le buttton.Ce n'est pas le basculement après la pause de la vidéo.
    Les manifestations du feu? Sera la classe additionnelle appliquée? Veuillez vérifier que.

    OriginalL'auteur m90