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

possible duplicate of [Play/pause HTML 5 video using JQuery](http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery) — Brad Werth, Aug 14 '14 at 17:12

score 85 · Answer 1 · answered Mar 17 '13 at 21:04

85

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

answered Mar 17 '13 at 21:04

Musa

96,336
17
118
137

4

That's it! **Thank you very much.** I don't know much enough about this. – Shenya Mar 17 '13 at 21:19
Good grief! Thanks for this answer. – David Vincent Gagne May 18 '17 at 20:30
I found it. Thanks for answer. – Tuan Ngo Jun 27 '19 at 06:57
Property 'get' does not exist on type 'HTMLElement' – Bisneto Feb 18 '20 at 19:29
@Bisneto no one said it did. – Musa Feb 18 '20 at 21:59
This is your answer: To get access to the element inside just use array syntax or .get(). e.g. $('#videoPlayer')[0].play(); or $('#videoPlayer').get(0).play(). Your answer result: "Property 'get' does not exist on type 'HTMLElement'" . So YOU said. and said WRONG – Bisneto Feb 19 '20 at 13:48
@Bisneto this is a jQuery question so `$('#videoPlayer')` gives you a **jQuery** object not an **HTMLElement**. If you're getting an HTMLElement you are doing something wrong. – Musa Feb 20 '20 at 14:45

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

1 Answers1

Linked