JSFiddle - React, Tailwind, and code Playground

by Jeremy Banks

HTML

<video id='video' width="100%"
      controls autoplay
      poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>

JavaScript

"play playing pause ratechange seeking seeked timeupdate volumechange".split(/\s+/g).forEach(function(s) {
document.getElementById("video").addEventListener(s, function(e) {
  if ( ! document.getElementById(s) ) {
    var el = document.createElement("div");
    el.id = s;
      console.log(e.defaultPrevented);
    el.textContent = s + ".cancellable = " + e.cancelable;
    document.body.appendChild(el);
    e.preventDefault(), e.stopPropagation();
      console.log(e.defaultPrevented);
    return false;
  } 
});
});