JSFiddle - React, Tailwind, and code Playground

HTML

<p>Copied from the <a href="http://www.w3.org/2010/05/video/mediaevents.html"><a
  href='http://www.w3.org/TR/html5/video.html#video'>w3.org HTML5 video demo</a> for testing purposes.</p>

  <div>
    <video id='video'
      controls preload='auto'>
      <source 
        src="https://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
    <div id='buttons'>
      <button onclick="document._video.load()">load()</button>
      <button onclick="document._video.play()">play()</button>
      <button onclick="document._video.pause()">pause()</button>
      <button onclick="document._video.currentTime+=10">currentTime+=10</button>
      <button onclick="document._video.currentTime-=10">currentTime-=10</button>
      <button onclick="document._video.currentTime=50">currentTime=50</button><br>
      <button onclick="document._video.playbackRate++">playbackRate++</button>
      <button onclick="document._video.playbackRate--">playbackRate--</button>
      <button onclick="document._video.playbackRate+=0.1">playbackRate+=0.1</button>
      <button onclick="document._video.playbackRate-=0.1">playbackRate-=0.1</button><br>
      <button onclick="document._video.volume+=0.1">volume+=0.1</button>
      <button onclick="document._video.volume-=0.1">volume-=0.1</button>
      <button onclick="document._video.muted=true">muted=true</button>
      <button onclick="document._video.muted=false">muted=false</button><br>
    </div>
    <table summary='The Media Events table contains the number of times each media event has been received'>
      <caption>Media Events</caption>
      <tbody id='events'>
      </tbody>
    </table>
    <table summary='The Media Properties table contains the value of the media properties'>
      <caption>Media Properties</caption>
      <tbody id='properties'>
      </tbody>
    </table>

    <table id='canPlayType' summary='The Media Types table indicates...

CSS

body {  color: black; background-color: white; font-family: Arial, sans-serif; }
video { 
  border: 1px solid black;
  padding: 0; margin: 0;
  width: 427px;
  height: 240px;
  background-color: black;
  margin: auto; display: block;
}

table { border: none; margin: auto; margin-top: 1ex;}
th {  text-align: right; }
caption { background-color: #ccc; }
thead th {  background-color: #ccc; }
#events td { text-align: right; width: 4ex;}
#properties td { }
hr { clear: both; margin-top: 2em;}
.true { background-color: #8f8 }
.false { background-color: #faf }
#buttons { text-align: center; }

#m_video td, #m_video th, #tracks td, #tracks tth { text-align: center; padding-left: 0.5ex; padding-right: 0.5ex;}

JavaScript

var media_events = new Array();

// was extracted from the spec in November 2011
media_events["loadstart"] = 0;
media_events["progress"] = 0;
media_events["suspend"] = 0;
media_events["abort"] = 0;
media_events["error"] = 0;
media_events["emptied"] = 0;
media_events["stalled"] = 0;
media_events["loadedmetadata"] = 0;
media_events["loadeddata"] = 0;
media_events["canplay"] = 0;
media_events["canplaythrough"] = 0;
media_events["playing"] = 0;
media_events["waiting"] = 0;
media_events["seeking"] = 0;
media_events["seeked"] = 0;
media_events["ended"] = 0;
media_events["durationchange"] = 0;
media_events["timeupdate"] = 0;
media_events["play"] = 0;
media_events["pause"] = 0;
media_events["ratechange"] = 0;
media_events["volumechange"] = 0;

var media_controller_events = new Array();

// was extracted from the spec in November 2011
media_controller_events["emptied"] = 0;
media_controller_events["loadedmetadata"] = 0;
media_controller_events["loadeddata"] = 0;
media_controller_events["canplay"] = 0;
media_controller_events["canplaythrough"] = 0;
media_controller_events["playing"] = 0;
media_controller_events["ended"] = 0;
media_controller_events["waiting"] = 0;
media_controller_events["durationchange"] = 0;
media_controller_events["timeupdate"] = 0;
media_controller_events["play"] = 0;
media_controller_events["pause"] = 0;
media_controller_events["ratechange"] = 0;
media_controller_events["volumechange"] = 0;

// was extracted from the spec in November 2011
var media_properties = [ "error", "src", "currentSrc", "crossOrigin", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime", "initialTime", "duration", "startOffsetTime", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable", "ended", "autoplay", "loop", "mediaGroup", "controller", "controls", "volume", "muted", "defaultMuted", "audioTracks", "videoTracks", "textTracks", "width", "height", "videoWidth", "videoHeight", "poster" ];

var media_properties_elts = null;

var webm =...