HLS Streaming with settings Quality and Captions - plyr io

hls-streaming-with-settings-quality-and-captions-plyr-io.markdown

HLS Streaming with settings Quality and Captions - plyr io

Yout can settings Quality of video and select Subtitle in your video in the Http Live Streaming (HLS) watermark by Insnesia.com

A Pen by SA Developers on CodePen.

License.

index.html

<div class='container'>
<span class="dots"></span>
<video controls="" crossorigin="" playsinline=""></video></div
<script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script>

script.js

document.addEventListener('DOMContentLoaded', () => {
const controls = ['play-large','play','mute','volume','captions','settings','fullscreen'];
const source = 'https://cnn-cnninternational-1-eu.rakuten.wurl.com/manifest/playlist.m3u8';
const video = document.querySelector('video');       
// const player = Plyr.setup('video', {controls, captions: {active: false, update: false, language: 'auto'}});
const defaultOptions = {controls,captions: {active: true, update: false, language: 'auto'}};

  if (Hls.isSupported()) {
   
    const hls = new Hls();
    hls.loadSource(source);
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {

      // Transform available levels into an array of integers (height values).
      const availableQualities = hls.levels.map((l) => l.height)

      // Add new qualities to option
      defaultOptions.quality = {
        default: availableQualities[0],
        options: availableQualities,
        // this ensures Plyr to use Hls to update quality level
        forced: true,        
        onChange: (e) => updateQuality(e),
      }

      // Initialize here
      const player = new Plyr(video, defaultOptions);
    });
    hls.attachMedia(video);
    window.hls = hls;
  } else {
 
    const player = new Plyr(video, defaultOptions);
  }

  function updateQuality(newQuality) {
    window.hls.levels.forEach((level, levelIndex) => {
      if (level.height === newQuality) {
        console.log("Found quality match with " + newQuality);
        window.hls.currentLevel = levelIndex;
      }
    });
  }
});

scripts

<script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script>
<script src="https://unpkg.com/plyr@3"></script>

style.scss

.container {
	margin: 20px auto;
	width: 720px;
}
video {
	width: 100%;
}

styles

<link href="https://unpkg.com/plyr@3.6.9/dist/plyr.css" rel="stylesheet" />