Play/Pause mp4 video using jQuery

Question

I want to add buttons, or just make the video holder clickable, to play/pause a video that autoplays when the webpage starts.

Have looked at this issue on Stack but have been unable to piece it together to fit in with my jQuery.

Any help would be appreciated! Thanks

jQuery

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

});

HTML

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

Answer 1

For the playing and pausing, you can just get the ordinary DOM element from the jQuery collection and use .play() and .pause() on the video after checking the playback state in .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>'),
     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

this Jquery code make vedeoholder to toggle between play/pause on click:

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