HTML5 video play/pause actions with Javascript/jQuery

by Mukul kant

HTML

<div class="wrap">

<video id="myVideo" width="320" height="176">
  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
      
<div class="buttons">
  <button class="uk-button uk-button-primary first" onclick="playVid()" type="button">
    play</button>
  <button class="uk-button uk-button-primary second" onclick="pauseVid()" type="button">
    stop</button>
 </div>
</div>

CSS

.wrap {
    position: relative;
}
.second {
    display: none;
}
.buttons {
    width: 320px;
    text-align: center;
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

JavaScript

// get video element id
var vidClip = document.getElementById("myVideo"); 

// play video event
function playVid() { 
    myVideo.play();
} 

// pause video event
function pauseVid() { 
  myVideo.pause(); 
}

// toggle button class on click
$('button').on('click', function() {
  $('.first, .second').toggle();
});

// toggle button class when finished
vidClip.onended = function(e) {
  $('.first, .second').toggle();
};