html5-video by button $ (...). Play ist keine Funktion

Question

Ich versuche Videos nacheinander über die Schaltfläche oder automatisch am Ende des Videos abzuspielen. durch diesen Code:

//automatically play 
$("#videoPlayer").bind('ended', function() { 
if(cnt <= 10 && bNum == 0) cnt++; 
$('#videoPlayer').attr('poster','./media/spot'+cnt+'.jpg').html('<source src="./media/spot'+cnt+'.mp4" type="video/mp4"><source src="./media/spot'+cnt+'.ogg" type="video/ogg"><source src="./media/spot'+cnt+'.webm" type="video/webm">'); 
$('#video-title').html('Spot '+cnt); 
if(cnt < 10) { 
    this.load(); 
    this.play(); 
    cnt++; 
} 
bNum = 1; 
if(cnt >= 10) $('.link1').remove(); 
}); 

//Play by the button 
$('.link1').on('click', function() { 
    if(cnt < 10 && bNum == 0) cnt++; 
    $(this).attr('rel', cnt).attr('title', 'Spot '+cnt); 
    $('#videoPlayer').attr('poster','./media/spot'+cnt+'.jpg').html('<source src="./media/spot'+cnt+'.mp4" type="video/mp4"><source src="./media/spot'+cnt+'.ogg" type="video/ogg"><source src="./media/spot'+cnt+'.webm" type="video/webm">'); 
    $('#video-title').html('Spot '+cnt); 
    if(cnt >= 10) $('.link1').remove(); 
    if(cnt <= 10) { 
    if($('#videoPlayer').load()) $('#videoPlayer').play(); 
    cnt++; 
    } 
}); 

der HTML-Teil ist:

<video width="640" id="videoPlayer" autoplay preload="metadata" poster="./media/spot1.jpg"> 
<source src="./media/spot1.ogg" type="video/ogg"> 
<source src="./media/spot1.mp4" type="video/mp4"> 
<source src="./media/spot1.webm" type="video/webm"> 
Your browser does not support the video tag. 
</video></div> 
<ul> 
<li class="link1" rel="2">Nächster Spot </li> 
</ul> 
</div> 

der automatische Teil funktioniert gut, ohne einen Fehler. Aber der Teil nach Knopf bekommt einen Fehler an der Linie;

$('#videoPlayer').play(); 

mit der Nachricht

"$(...).play is not a function". 

ich nicht, warum finden. (Für this.play() kann ich auch $('videoPlayer') im automatischen Teil schreiben. Es ist das gleiche.)

Answer 1

$('#videoPlayer') gibt Ihnen ein jQuery-Objekt und das jQuery-Objekt nicht über eine play Methode. Die Wiedergabemethode, nach der Sie suchen, befindet sich im nativen dom-Element innerhalb des jQuery-Objekts. Um Zugriff auf das Element im Inneren zu erhalten, verwenden Sie einfach die Array-Syntax oder .get(). z.B. $('#videoPlayer')[0].play(); oder $('#videoPlayer').get(0).play();