HTML5 video play/pause actions with Javascript/jQuery

by mrjordy

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.17.0/css/uikit.min.css">
<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">
    <i class="uk-icon-play"></i></button>
  <button class="uk-button uk-button-primary second" onclick="pauseVid()" type="button">
    <i class="uk-icon-pause"></i></button>
</div>

CSS

button {display:block}
.second {display: none;}

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();
};