Added video quality feature (#43)
* Fixed docker compose errors * Added quality selector * Remove log statement Co-authored-by: Matthew Esposito <matt@matthew.science> * Show kbps in quality Co-authored-by: Matthew Esposito <matt@matthew.science> * Make highest quality default * Add styling, default option to highest --------- Co-authored-by: Matthew Esposito <matt@matthew.science>
This commit is contained in:
parent
fe6123e05f
commit
c6030064f1
@ -12,12 +12,11 @@ services:
|
||||
read_only: true
|
||||
security_opt:
|
||||
- no-new-privileges:true
|
||||
- seccomp="seccomp-redlib.json"
|
||||
cap_drop:
|
||||
- ALL
|
||||
networks:
|
||||
- redlib
|
||||
security_opt:
|
||||
- seccomp="seccomp-redlib.json"
|
||||
healthcheck:
|
||||
test: ["CMD", "wget", "--spider", "-q", "--tries=1", "http://localhost:8080/settings"]
|
||||
interval: 5m
|
||||
|
@ -30,12 +30,21 @@
|
||||
|
||||
function initializeHls() {
|
||||
newVideo.removeEventListener('play', initializeHls);
|
||||
|
||||
var hls = new Hls({ autoStartLoad: false });
|
||||
hls.loadSource(playlist);
|
||||
hls.attachMedia(newVideo);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
||||
hls.loadLevel = hls.levels.length - 1;
|
||||
var availableLevels = hls.levels.map(function(level) {
|
||||
return {
|
||||
height: level.height,
|
||||
width: level.width,
|
||||
bitrate: level.bitrate,
|
||||
};
|
||||
});
|
||||
|
||||
addQualitySelector(newVideo, hls, availableLevels);
|
||||
|
||||
hls.startLoad();
|
||||
newVideo.play();
|
||||
});
|
||||
@ -61,6 +70,30 @@
|
||||
});
|
||||
}
|
||||
|
||||
function addQualitySelector(videoElement, hlsInstance, availableLevels) {
|
||||
var qualitySelector = document.createElement('select');
|
||||
qualitySelector.classList.add('quality-selector');
|
||||
var last = availableLevels.length - 1;
|
||||
availableLevels.forEach(function (level, index) {
|
||||
var option = document.createElement('option');
|
||||
option.value = index.toString();
|
||||
var bitrate = (level.bitrate / 1_000).toFixed(0);
|
||||
option.text = level.height + 'p (' + bitrate + ' kbps)';
|
||||
if (index === last) {
|
||||
option.selected = "selected";
|
||||
}
|
||||
qualitySelector.appendChild(option);
|
||||
});
|
||||
qualitySelector.selectedIndex = availableLevels.length - 1;
|
||||
qualitySelector.addEventListener('change', function () {
|
||||
var selectedIndex = qualitySelector.selectedIndex;
|
||||
hlsInstance.nextLevel = selectedIndex;
|
||||
hlsInstance.startLoad();
|
||||
});
|
||||
|
||||
videoElement.parentNode.appendChild(qualitySelector);
|
||||
}
|
||||
|
||||
newVideo.addEventListener('play', initializeHls);
|
||||
|
||||
if (autoplay) {
|
||||
|
@ -1714,3 +1714,19 @@ td, th {
|
||||
justify-content: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.quality-selector {
|
||||
border: 2px var(--outside) solid;
|
||||
margin-top: 8px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.quality-selector option {
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.quality-selector option:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--text);
|
||||
}
|
Loading…
Reference in New Issue
Block a user