JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<script src="https://vjs.zencdn.net/5.19.2/video.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/5.19.2/video-js.css">
<script src="https://raw.githubusercontent.com/sahilkashyap64/hls/master/js/hls.min.js"></script>
<script src="https://raw.githubusercontent.com/sahilkashyap64/hls/master/js/videojs5-hlsjs-source-handler.min.js"></script>
<script src="https://raw.githubusercontent.com/sahilkashyap64/hls/master/js/vjs-quality-picker.js"></script>
 <div class="container">
        <div class="my-5 embed-responsive embed-responsive-16by9">
            <video id="video" class="embed-responsive-item video-js vjs-default-skin" width="640" height="360" autoplay controls></video>
        </div>
        
    </div>

CSS

.video-js {
            font-size: 1rem;
        }

JavaScript

var player = videojs('video');

        player.qualityPickerPlugin();
        
        player.src({
            src: 'http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8',
            type: 'application/x-mpegURL'
        });

        player.play();