jQueryを使用してmp4ビデオを再生/一時停止する

Question

ボタンを追加するか、ビデオホルダーをクリック可能にして、Webページの開始時に自動再生するビデオを再生/一時停止します。

Stackでこの問題を見てきましたが、それをまとめてjQueryに合わせることができませんでした。

助けていただけたら幸いです！おかげ

jQueryの

$(document).ready(function(){ 
    $('#videoholder').append(
     '<video width="600px" autoplay>' + 
      '<source src="Images/event-video.mp4" type="video/mp4"></source>' + 
     '</video>'); 

}); 

再生と一時停止のために

<div id="videoholder"></div> 

Answer 1

HTML、あなただけのjQueryのコレクションから通常のDOM要素を取得し、確認した後、ビデオで.play()と.pause()を使用することができます再生状態.paused：

$(document).ready(function(){ 
 
    var theVideo = $('<video width="600px" autoplay>' + 
 
      '<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"></source>' + 
 
     '</video>'), 
 
    \t videoHolder = $('#videoholder'); 
 
    videoHolder.append(theVideo); 
 

 
    videoHolder.on("click", function() { 
 
     var videoEl = theVideo[0]; 
 
     if (videoEl.paused) { 
 
     videoEl.play(); 
 
     } else { 
 
     videoEl.pause(); 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="videoholder"></div>

Answer 2

このjqueryのコードは、クリックで再生/一時停止を切り替えるためのvedeoholderします

$(document).ready(function() { 
    $('#videoholder').click(function() { 
     var video=$(this).children("video")[0]; 
     video.paused ? video.play() : video.pause(); 
    }); 
});