Finies à la vidéo HTML5 à l’aide de jQuery

J’essaie de relier les événements play / pause et les événements ended aide de jQuery, mais il y a un problème:

Lorsque je clique avec le bouton droit sur la vidéo et que je sélectionne Lecture ou Pause, les icons changent correctement. Lorsque je clique sur le bouton de lecture, il se met en pause, mais si je clique sur le bouton de pause pour continuer la vidéo, la lecture ne change pas.

Quelqu’un peut-il me dire où je me trompe?

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

Il n’y a pas d’atsortingbution de pause pour la vidéo HTML5. Au lieu de cela, vous devriez jeter un coup d’œil sur les événements et propriétés des médias .

Dans votre cas, cela voudrait dire:

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

BTW: Etant donné que vous appelez assez souvent $('#video') il peut être judicieux de le stocker dans une variable – de cette manière, vous n’avez pas à appeler le sélecteur jQuery un million de fois. Comme:

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

EDIT: En ce qui concerne votre commentaire, il est difficile de dire sans voir les contrôles (HTML & CSS) que vous utilisez, mais vous pouvez toujours utiliser le même gestionnaire pour tous les événements qui déclenchent le même comportement (et depuis le comportement juste en pause il devrait être également ended lorsqu’il est lié au même gestionnaire). En outre, dans le code que vous avez publié, vous utilisez removeClass on removeClass (où il devrait probablement s’agir de addClass ). Donc, cela devrait fonctionner:

 $('#video').bind('play ended', function () { //should sortinggger once on any play and ended event $('.playbtn').addClass('pausebtn'); //might also be $('#playbtn') ??? }); $('#video').bind('pause', function () { //should sortinggger once on every pause event $('.playbtn').removeClass('pausebtn'); //might also be $('#playbtn') ??? });

Un autre problème que j’ai remarqué est que vous utilisez #playbtn une fois et .playbtn une autre fois. Assurez-vous de faire référence aux mêmes éléments lorsque vous essayez de faire quelque chose avec votre bouton Play.