JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://rawgit.com/mediaelement/mediaelement/master/build/mediaelementplayer.min.css">
<script src="https://rawgit.com/mediaelement/mediaelement/master/build/mediaelement-and-player.min.js"></script>
CSS
video {
width:100%;
}
JavaScript
var player;
function render() {
document.body.innerHTML = `<video id="vid" width="640" height="360"></video>`
player = new MediaElementPlayer('vid', {
features: ['playpause', 'current', 'progress', 'duration', 'chromecast']
});
player.setSrc('https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4')
player.load();
player.play();
}
setTimeout(function() { player.setSrc('https://www.bok.net/dash/tears_of_steel/cleartext/stream.mpd')
player.load();
player.play();
}, 5000);
render();