JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.12/video-js.css">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<audio id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" 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>
</audio>

CSS

.video-js.vjs-audio {
    height: 40px !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,
            muteToggle: false,
            volumeControl: false,
            'volumeMenuButton': {
                volumeBar: {
                    vertical: true
                }
            }
        };
        
		globalConfig = {
            children: {
				controlBar: {
					children: {
						liveDisplay: false
					}
				}
			}
		};

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

            if( videoplayer.tagName === 'AUDIO' ) {
                config.children.controlBar.children = $.extend( config.children.controlBar.children, audioConfig );

                $( videoplayer ).addClass('vjs-audio vjs-has-started vjs-controls-enabled');
            }
			videojs( videoplayer, config ).ready( function () {
				/* More custom stuff goes here */
                //videoplayer.
			} );
		} );
	} );

} )( jQuery, videojs );