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
|
read_only: true
|
||||||
security_opt:
|
security_opt:
|
||||||
- no-new-privileges:true
|
- no-new-privileges:true
|
||||||
|
- seccomp="seccomp-redlib.json"
|
||||||
cap_drop:
|
cap_drop:
|
||||||
- ALL
|
- ALL
|
||||||
networks:
|
networks:
|
||||||
- redlib
|
- redlib
|
||||||
security_opt:
|
|
||||||
- seccomp="seccomp-redlib.json"
|
|
||||||
healthcheck:
|
healthcheck:
|
||||||
test: ["CMD", "wget", "--spider", "-q", "--tries=1", "http://localhost:8080/settings"]
|
test: ["CMD", "wget", "--spider", "-q", "--tries=1", "http://localhost:8080/settings"]
|
||||||
interval: 5m
|
interval: 5m
|
||||||
|
@ -30,12 +30,21 @@
|
|||||||
|
|
||||||
function initializeHls() {
|
function initializeHls() {
|
||||||
newVideo.removeEventListener('play', initializeHls);
|
newVideo.removeEventListener('play', initializeHls);
|
||||||
|
|
||||||
var hls = new Hls({ autoStartLoad: false });
|
var hls = new Hls({ autoStartLoad: false });
|
||||||
hls.loadSource(playlist);
|
hls.loadSource(playlist);
|
||||||
hls.attachMedia(newVideo);
|
hls.attachMedia(newVideo);
|
||||||
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
||||||
hls.loadLevel = hls.levels.length - 1;
|
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();
|
hls.startLoad();
|
||||||
newVideo.play();
|
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);
|
newVideo.addEventListener('play', initializeHls);
|
||||||
|
|
||||||
if (autoplay) {
|
if (autoplay) {
|
||||||
@ -74,4 +107,4 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
// @license-end
|
// @license-end
|
||||||
|
@ -1714,3 +1714,19 @@ td, th {
|
|||||||
justify-content: initial;
|
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