JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<video muted id="myVideo" 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 id="play">Play</button>

JavaScript

var video = document.getElementById('myVideo');
var playbutton = document.getElementById("play");

playbutton.addEventListener("click", function (e) {
  //  Toggle between play and pause based on the paused property
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}, false);

video.addEventListener("play", function () {
  playbutton.innerHTML = "Pause";
}, false);

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