JSFiddle - React, Tailwind, and code Playground

HTML

<video>
    <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/redcliff450.theora.ogv" type="video/ogv">
    <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/redcliff450.webm" type="video/webm">
    <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/redcliff450.mp4" type="video/mp4">        
</video>
        
<button id="play">play</button>
<button id="pause">pause</button>
<label for="volume">Volume:
    <input type="range" name="volume" id="volume" min="0" step="0.1" max="1"></label>

JavaScript

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

play.setAttribute("disabled","disabled");
    
video.addEventListener('canplaythrough', activateplay, false);

function activateplay(e){
    play.removeAttribute('disabled');
    play.addEventListener('click', 
        function(){ video.play(); }, false);
};

pause.addEventListener('click', 
        function(){ video.pause(); }, false);

volume.addEventListener('input',
        function(){ video.volume=parseFloat(volume.value);}, false);