JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls preload="none">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

JavaScript

var v = document.getElementById( "video" );;

// Listen for suspend event

// Listen to volume change event
v.addEventListener("volumechange",function (e){
    console.log( "volumechange fired!" );
    v.load();
    v.play();  
}, false);

// Play the video when possible
v.addEventListener( "canplay", function() {
this.mute();
}, true );

// Load the first video source
v.load();

setTimeout(function() {
  v.mute();
}, 2500 );