jQueryで 'this'の親ビデオを再生

Question

私はHTML5ビデオプレーヤーとカスタムコントロールボタンを使用しています。

<video width="840" id="video"> 

        <source src="{{box.video}}" type="video/mp4"> 

        </video> 
        <div class="controls"> 
        <button class="play" ><i class="fa fa-play" aria-hidden="true"></i></button> 

JSコード：

$(".play").click(function() { 
       $(this).closest("video")[0].play(); 
      }); 

私は再生ボタンをクリックし

、その未定義のエラーを取得 は、ここに私のHTML構造です。どうしたの？どうすれば修正できますか？

Answer 1

videoは、クリックされたボタンの親ではないためです。

$(".play").click(function() { 
    $(this).closest('.controls').prev('video')[0].play(); 
}); 

<video width="840" id="video"> 
    <source src="{{box.video}}" type="video/mp4"> 
</video> 
<div class="controls"> 
    <button class="play"> 
    <i class="fa fa-play" aria-hidden="true"></i> 
    </button> 
</div>