JSFiddle - React, Tailwind, and code Playground

HTML

<section id="Example_Video_Container">

  <video width="576" height="432" id="Example_Video" controls>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.webm">
  </video>
  <div id="Example_Video_Controls">
    <button type="button" id="Play_Pause" >Play</button>
  </div>
  </section>

JavaScript

window.addEventListener ("DOMContentLoaded",handleWindowLoad);
function handleWindowLoad ()
{
    var Video = document.getElementById ( "Example_Video" );
    var PlayButton = document.getElementById ( "Play_Pause" );
    var MuteButton = document.getElementById ( "Mute_Unmute" );
    var Slider = document.getElementById ( "Slider" );

    PlayButton.addEventListener ( "click", Play_Pause_Video ) ;

    function Play_Pause_Video ()
    {
        if (Video.paused === true)
        {
            Video.play();
            PlayButton.innerHTML = "Pause";
        }
        else
        {
            Video.pause();
            PlayButton.innerHTML = "Play";
        }
    }
}