I am trying to create html/php player (see this below html code)
<html>
<head>
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css" />
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.3/plyr.min.js"></script>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
</head>
<body>
<div id="player">
<video title="<?php echo $_REQUEST["q"]; ?>" preload="none" id="video" controls="controls" autoplay controls crossorigin style="width:100%;height:100%;"></video>
</div>
<script>
const controls =
[
'play-large',
'play',
'fast-forward',
'progress',
'mute',
'volume',
'captions',
'settings',
'pip',
'airplay',
'fullscreen'
];
const player = new Plyr('#video',{controls});
setTimeout(videovisible, 4000)
function videovisible() {
document.getElementById('loading').style.display = 'none'
}
var url="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
</script>
</body>
</html>
I was able to add controls to player (see below screenshot 1).
But when I add quality option using this code , it only shows quality under settings button and hides all the controls (rewind, fast-forward,current-time,etc.) (see screenshot 2).
I tried adding quality option using this code, but it only shows quality under settings button and hides all the controls (rewind, fast-forward,current-time,etc.) so don't know what's wrong here. Here is the modified code.
var video = document.getElementById('video');
var url = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
const controls =
[
'play-large',
'play',
'fast-forward',
'progress',
'mute',
'volume',
'captions',
'settings',
'pip',
'airplay',
'fullscreen'
];
const 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;
}
});
}
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(url);
//hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function(event,data) {
// Transform available levels into an array of integers (height values).
var 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),
}
controls.control ={
controls:['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
}
// Initialize here
var player = new Plyr('video',defaultOptions,controls);
});
hls.attachMedia(video);
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('loadedmetadata', function(event,data) {
var player = new Plyr('video',defaultOptions,controls);
video.play();
});
}
How can I keep both controls and quality in player?