JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<script src="https://users.service2media.com/~djhartman/external/videojs/video.js"></script>
<link rel="stylesheet" href="https://users.service2media.com/~djhartman/external/videojs/video-js.css">
<audio id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" crossorigin="anonymous" autoplay>
 <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
 <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
 <track kind="subtitles" src="http://www.videojs.com/vtt/captions.vtt" srclang="en" label="English"></track>
</audio>

CSS

.video-js.vjs-audio {
    height: 30px !important;
}
/*
.video-js.vjs-audio .vjs-big-play-button {
    display: none !important;
}
*/

JavaScript

( function ( $, videojs ) {
	$( function () {
		var config, globalConfig, audioConfig,
			videoplayers = $( '.video-js' );

		audioConfig = {
			fullscreenToggle: false,
		};

		globalConfig = {
			children: {
				controlBar: {
					liveDisplay: false
				}
			}
		};

		videoplayers.each( function ( index, videoplayer ) {
			// Launch the player
			config = $.extend( {}, globalConfig );

			if( videoplayer.tagName === 'AUDIO' ) {
				config.children.controlBar = $.extend( config.children.controlBar, audioConfig );
			}
            videojs( videoplayer, config ).ready( function () {
				/* More custom stuff goes here */
                if( this.isAudio() ) {
    				$( this.el() ).addClass('vjs-has-started');
                }
			} );
		} );
	} );

} )( jQuery, videojs );