web-dev-qa-db-ja.com

ボタン$（...）。playによるhtml5-videoは関数ではありません

ボタンを使用して、またはビデオの最後で自動的にビデオを次々に再生しようとします。このコードによって：

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

自動部分はエラーなしでうまく機能します。しかし、ボタンによるパートは行でエラーになります。

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

メッセージ付き

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

理由がわかりません。 （this.play()の場合、自動部分に$('videoPlayer')を記述することもできます。同じです。）

javascriptjqueryhtml5-video
19
Shenya

$('#videoPlayer')はjQueryオブジェクトを提供し、jQueryオブジェクトにはplayメソッドがありません。探しているplayメソッドは、jQueryオブジェクト内のネイティブのdom要素にあります。内部の要素にアクセスするには、配列構文または.get()を使用します。例えば$('#videoPlayer')[0].play();または$('#videoPlayer').get(0).play();

73
Musa