JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/4.12/video-js.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/6.2.5/video.min.js"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/dashjs/2.5.0/dash.all.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.1/videojs-dash.min.js"></script>
 
<script src='//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.3/videojs-contrib-hls.min.js'></script>
 
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>




<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls>
      <source type="application/x-mpegURL" src="http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on">
</video>

CSS

.vjs-control.vjs-tweet-button:before {
    font-family: FontAwesome;
    content: "\f081";
}

.vjs-trim-start-button {
    position:absolute;
    background-color:red;
    color:white;
    left:0px;
    top:-20px;
}

JavaScript

// var thePlayer = this.player;

videojs.TrimVideo = videojs.ProgressControl.extend({
    init: function(player, options){
        videojs.ProgressControl.call(this, player, options);
    }
});
this.player = videojs("example_video_1", {});
var thePlayer = this.player;
thePlayer.controlBar.progressControl.trimVideo = thePlayer.controlBar.progressControl.addChild(
    new videojs.TrimVideo(thePlayer, {
        el: videojs.Component.prototype.createEl(null, {
            className: 'vjs-trim-start-button vjs-menu-button',
            innerHTML: '<div style="">words and words</div>',
            role: 'button',
            removeChild: 'seekBar'
        })
    })
);