JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<video mediagroup="media1" muted preload="auto" height="150">
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.mp4" type='video/mp4'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.webm" type='video/webm'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.ogv" type='video/ogg'>
</video>

<video mediagroup="media1" muted preload="auto" height="150">
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio5/big_buck_bunny/trailer.mp4" type='video/mp4'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio5/big_buck_bunny/trailer.webm" type='video/webm'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio5/big_buck_bunny/trailer.ogv" type='video/ogg'>
</video>
              
<button id="play" disabled> play all</button>
<button id="pause"> pause all</button>

JavaScript

var mediacontroller = document.querySelector('video').controller,
    play = document.querySelector("#play"),
    pause = document.querySelector("#pause");

mediacontroller.addEventListener('canplaythrough', function(){ 
    alert('ok');
    play.removeAttribute('disabled');
    play.addEventListener('click', function(){ document.querySelector('video').play(); alert('uh'); }, false);

}, false);