DEV Community

Sahil kashyap
Sahil kashyap

Posted on

Video.js 8 quality selector

#videojs #codequality #selector #webdev

Demo:Player in js fiddle

Video tag:

<video id="my-video" class="video-js vjs-default-skin" width="640" height="360" controls> <source src="https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8" type="application/x-mpegURL"> <!-- <source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml"> --> </video>
Enter fullscreen mode Exit fullscreen mode

Lib used:

<link href="https://unpkg.com/jb-videojs-hls-quality-selector/dist/css/jb-videojs-hls-quality-selector.css" rel="stylesheet"> <!-- videojs-contrib-quality-levels plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.0.15/videojs-contrib-quality-levels.min.js"></script>  <!-- jb-videojs-hls-quality-selector --> <script src="https://unpkg.com/jb-videojs-hls-quality-selector"></script>
Enter fullscreen mode Exit fullscreen mode

make sure to add this is

 <script> document.addEventListener('DOMContentLoaded', function() { const player = videojs('my-video'); player.ready(function() { player.hlsQualitySelector({ displayCurrentQuality: true, }); }); }); </script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)