JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<video muted id="video-1" width="320" height="176" controls>
  <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>
<br>
<button class="play" data-video-id="video-1">Play</button>

JavaScript

$(document).on('click', '.play', function (e) {
  var playbutton = this;
  var videoId = $(this).data('video-id');
  var video = document.getElementById(videoId);
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
  video.addEventListener("play", function () {
    playbutton.innerHTML = "Pause";
  }, false);

  video.addEventListener("pause", function () {
    playbutton.innerHTML = "Play";
  }, false);
})