Bind Play/Pause/Ended Funktionen HTML5-Video mit jQuery

Question

Ich versuche play/pause und ended Ereignisse zu binden, mit jQuery, aber es gibt ein Problem:

Wenn ich einen Rechtsklick auf das Video und wählen Sie Wiedergabe oder Pause Die Symbole ändern sich korrekt. Wenn ich auf die Wiedergabetaste klicke, ändert sich die Wiedergabe in Pause, aber wenn ich auf die Pause-Schaltfläche klicke, um das Video fortzusetzen, ändert sich die Wiedergabe nicht.

Kann mir jemand sagen, wo ich falsch liege?

Hier ist mein 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; 
} 

Answer 1

Es gibt keine pause -Attribut für HTML5-Video. Stattdessen sollten Sie einen Blick auf media events and properties werfen.

In Ihrem Fall würde das bedeuten,:

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

BTW: Da Sie $('#video') ziemlich oft nennen es könnte eine gute Idee sein, dass speichern in einer Variablen - diese Weise müssen Sie das nicht nennen jQuery-Selektor eine millionenfach. Wie:

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

EDIT: Ihren Kommentar bezüglich ist es schwer, ohne zu sagen, die Kontrollen zu sehen (HTML & CSS) Sie verwenden, aber was Sie auf jeden Fall tun können, ist unter Verwendung der gleichen Prozedur für alle Veranstaltungen die das gleiche Verhalten auslösen (und da das Verhalten gleich pause ist, sollte es auch an ended gebunden sein, wenn es an denselben Handler gebunden ist). Außerdem verwenden Sie in dem Code, den Sie veröffentlichten, removeClass auf beendet (wo es wahrscheinlich addClass sein sollte). So sollte diese Arbeit:

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

Eine weitere Panne bemerkte ich, dass Sie verwenden #playbtn einmal und .playbtn ein anderes Mal. Stelle sicher, dass du dich auf die gleichen Gegenstände beziehst, wenn du versuchst, etwas mit deinem Play-Button zu machen.