JSFiddle - React, Tailwind, and code Playground

by Md Naveed

HTML

<body onload="loadVideo()">

  <h1>Video Sample Page</h1>

  <!--    <p>This page uses HTML5 Video and captions to demonstrate the possibilities and potentials of the platform. Please note that it uses APIs that are still in development and that may change with little or no warning.  I deemed the risk acceptable for the benefits that we get using them now.</p> 

    <h2>Starting point</h2>

    <p>This is the video we will work with. It uses a movie from the Blender Foundation (thanks :) )</p>-->
  <div id="container">
    <video id='video' width="600" autoplay muted loop poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.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' />
      <!-- 
          We're not using Flash as a fallback option. It should be coverage enough to 
        -->
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
  </div>
  <!-- End Container -->
  <script>
    function loadVideo() {
      setTimeout(function() {
        var video = document.getElementById('video');

        video.autoplay = true;
        video.play();

      }, 500);
    }

    // get the video
    var testVideo = document.querySelector('video');
    // use the whole window and a *named function*
    window.addEventListener('touchstart', function videoStart() {
      testVideo.play();
      console.log('first touch');
      // remove from the window and call the function we are removing
      this.removeEventListener('touchstart', videoStart);
    });

  </script>
</body>