html5-video by button $(...).play is not a function

Question

I try to play videos one after the other via button or automatically at the end of the video. by this 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++;
  }
});

the html part is:

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

the automatic part works well without an error. But the part by button gets an error at the line;

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

with the message

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

I can't find why. (For this.play() I can also write $('videoPlayer') in the automatic part. It is the same.)

Answer 1

$('#videoPlayer') gives you a jQuery object and the jQuery object does not have a play method. The play method you are looking for is in the native dom element inside the jQuery object. To get access to the element inside just use array syntax or .get(). e.g. $('#videoPlayer')[0].play(); or $('#videoPlayer').get(0).play();