sampotts
commented
4 years ago This issue comes up a lot, so I know it's important but can you use the current issue for this, please?
Open LukeMadhanga opened 4 years ago
sampotts
commented
4 years ago This issue comes up a lot, so I know it's important but can you use the current issue for this, please?
LukeMadhanga
commented
4 years ago Okay, do you have a preferred issue that I can add to, or any of the existing ones?
bekee
commented
3 years ago There has been no solution to this issue. It's really a problem
ShowDon
commented
3 years ago Hello! I think the 'no option for quality control with HLS' issue appears if you make a instance of Plyr. I think to prevent this just remove the id from video tag or you can work around.
If anyone got the solution other than mine, please let me know. Thanks.
denilly
commented
3 years ago In "Issues" I found some collections that together delivered the solution for manual and automatic quality control. Here is the source code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title>Plyr+HLS</title>
<link rel="stylesheet" href="./src/plyr.css" />
<style>
body {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<video controls crossorigin playsinline >
<source
src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
>
</video>
</div>
<script src="./src/plyr.js"></script>
<script src="./src/hls.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const video = document.querySelector("video");
const source = video.getElementsByTagName("source")[0].src;
// For more options see: https://github.com/sampotts/plyr/#options
const defaultOptions = {};
if (Hls.isSupported()) {
// For more Hls.js options, see https://github.com/dailymotion/hls.js
var hls = new Hls();
hls.loadSource(source);
hls.attachMedia(video);
window.hls = hls;
// 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),
}
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);
player.on('languagechange', () => {
// Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
});
});
} else {
// default options with no quality update in case Hls is not supported
var player = new Plyr(video, defaultOptions);
}
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>
</body>
</html>
Expected behaviour
I am putting together a prototype video player. I added all of the required settings to allow for the quality selector to show, but it is not.
Actual behaviour
The settings button only has a button for the speed selector, but not the quality selector.
Environment
Notes
The manifest files were generated with Google's Shaka Packager, so I don't think they will be the problem. I've switched between preferring HLS and MPD, but either way, the settings do not show. I'm testing on my local environment with a test URL of http://apg.co (stating because I don't know whether there are access controls that may restrict quality switching).
HTML
JS
MPD
HLS