JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="script.js"></script>

</head>
<body >  
	<video id="vid" width="800" height="450" loop="loop" preload="auto" controls style="width: 100%; height: auto; margin:0; right: 0;">
		
	</video>
</body>
</html>

JavaScript

window.onload = function(){
	
	var vid = document.getElementById('vid');
	var source = document.createElement('source');
	var supported = supportedVidType();
	
	source.src = 'http://avalonplay.com/video/loginvideo'+supported.src
	source.type = supported.type
	
	vid.appendChild( source );
	
}

var supportedVidType = function(){
	var vidTest = document.createElement( "video" )
	
	var types = {}
	
	if ( vidTest.canPlayType ) {
		// Check for MPEG-4 support
		types.mp4 = "" !== vidTest.canPlayType( 'video/mp4; codecs="mp4v.20.8"' )

		// Check for Webm support
		types.webm = "" !== vidTest.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
		
		// Check for Ogg support
		types.ogg = "" !== vidTest.canPlayType( 'video/ogg; codecs="theora"' );
	}
	
	for( type in types ){
		if(types[type]) {
			return {
				type: 'video/'+type,
				src: '.'+type
			}
		} 
	}
}