JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<link rel="stylesheet" href="https://users.service2media.com/~djhartman/external/videojs/video-js.css">
<script src="https://users.service2media.com/~djhartman/external/videojs/video.js"></script>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" poster="http://www.videojs.com/img/poster.jpg" crossorigin="anonymous">
 <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>
</video>

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 );