html5-video by button $（...）。play不是一个函数 [英] html5-video by button $(...).play is not a function

问题描述

我尝试通过按钮一个接一个地播放视频，或者在视频结束时自动播放视频。
此代码：

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

html部分是：

<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(); 

包含消息

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

我找不到原因。 （对于 this.play（）我也可以在自动部分中写 $（'videoPlayer'）。它是相同的。）

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

推荐答案

$（'＃videoPlayer'）给出你是一个jQuery对象，而jQuery对象没有 play 方法。您正在寻找的播放方法是在jQuery对象内的本机dom元素中。要访问内部元素，只需使用数组语法或 .get（）。例如 $（'＃videoPlayer'）[0] .play（）; 或 $（'＃videoPlayer'）。get（0）.play（ ）;

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

这篇关于html5-video by button $（...）。play不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！