How To Easily Integration Video Player For Plyr.Io - Quality Switcher For HLS & Auto Label

Struktur Code HTML

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="icon" type="image/x-icon" href=" <!-- Favicon Path Here --> "/>
<script> document.title = "Plyr.IO";</script>	
	
<!-- File Javascript -->
	
<!-- File jQuery -->
	
<!-- File Css -->
	
<link rel="dns-prefetch" href=" <!-- URL Address Here --> "/>
<link rel="dns-prefetch" href=" <!-- URL Address Here --> "/>
<link rel="dns-prefetch" href=" <!-- URL Address Here --> "/>
<link rel="dns-prefetch" href=" <!-- URL Address Here --> "/>
	
</head>
<body>
<!-- ID Perloader -->

<!-- Video Source or Player ID -->

<!-- JavaScript Setup Plyr.Io -->

<!-- Included PHP File - Pop-up Ads -->

<!-- Function JavaScript Perloader -->
</body>
</html>

Resource File Library

jQuery Files

<!-- jQuery Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JavaScript Files

<!-- JavaScript Files -->
<script src="https://cdn.codenine.biz.id/assets/libraries/plyrio/plyr.min.js"></script>
<script src="https://cdn.codenine.biz.id/assets/libraries/plyrio/codenine-npm-hls.js"></script>

Css Style Files

<!-- CSS Style Files -->
<link rel="stylesheet" type="text/css" href="https://cdn.codenine.biz.id/assets/libraries/plyrio/plugins.css">
<link rel="stylesheet" type="text/css" href="https://cdn.codenine.biz.id/assets/libraries/plyrio/plyrio_style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.codenine.biz.id/assets/libraries/plyrio/perloader.css">

Follow Step by Step

#1 - Step  ID Perloader

<div id="loader-wrapper">
<div id="loader"></div>
<div class="circle-line">
<div class="circle-blue">&nbsp;</div>
<div class="circle-red">&nbsp;</div>
<div class="circle-green">&nbsp;</div>
<div class="circle-yellow">&nbsp;</div>
</div>
</div>
</div> 
#2 - Step Video Source or Player ID
<video controls crossorigin playsinline poster=" <!-- URL Poster or Thumbnail Here --> ">
<source src=" <!-- m3u8 file here --> " type="application/x-mpegURL" />
</video>
#3 - Step JavaScript Setup Plyr.Io
<script>
document.addEventListener("DOMContentLoaded", () => {
const video = document.querySelector("video");
const source = video.getElementsByTagName("source")[0].src;
  
const defaultOptions = {};

if (!Hls.isSupported()) {
video.src = source;
var player = new Plyr(video, defaultOptions);
} else {

const hls = new Hls();
hls.loadSource(source);

// From the m3u8 playlist, hls parses the manifest and returns
// all available video qualities. This is important, in this approach,
// we will have one source on the Plyr player.
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)
availableQualities.unshift(0) //prepend 0 to quality array

// Add new qualities to option
defaultOptions.quality = {
default: 0, //Default - AUTO
options: availableQualities,
forced: true,        
onChange: (e) => updateQuality(e),
}

// Add Auto Label 
defaultOptions.i18n = {
qualityLabel: {
0: 'Auto',
},
}

hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
var span = document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span")
if (hls.autoLevelEnabled) {
span.innerHTML = `AUTO (${hls.levels[data.level].height}p)`
} else {
span.innerHTML = `AUTO`
}
})
    
// Initialize new Plyr player with quality options
var player = new Plyr(video, defaultOptions);
});	

hls.attachMedia(video);
window.hls = hls;		 
}

function updateQuality(newQuality) {
if (newQuality === 0) {
window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0
} else {
window.hls.levels.forEach((level, levelIndex) => {
if (level.height === newQuality) {
console.log("Found quality match with " + newQuality);
window.hls.currentLevel = levelIndex;
}
});
}
}
});
</script>
#4 - Step Ads Popup On Player
<?php include './ad_popup.php'; ?>
NOTES : you must create a php file, Example : ad_popup.php

#5 - Step Function Perloader

<script>
setTimeout(function() {
$("#loader").delay(1000).fadeOut("slow");
$("#loader-wrapper").delay(1500).fadeOut("slow");
}, 2000);
</script>

Is this article useful to help you? : Donation - Support For My Work