player improvements

This commit is contained in:
ThaUnknown 2020-09-01 20:26:51 +02:00
parent 11b2cefd40
commit b48a2acb0f

View file

@ -14,12 +14,13 @@ const controls = document.getElementsByClassName('ctrl'),
remaining = document.querySelector("#remaining") remaining = document.querySelector("#remaining")
volume.addEventListener("input", function () { volume.addEventListener("input", function () {
updatevolume() updateVolume()
}); });
progress.addEventListener("input", setprogress); progress.addEventListener("input", setProgress);
video.addEventListener("playing", playcheck); video.addEventListener("playing", playCheck);
video.addEventListener("canplay", updateDisplay); video.addEventListener("canplay", updateDisplay);
video.addEventListener("loadedmetadata", setduration); video.addEventListener("loadedmetadata", setDuration);
video.addEventListener("ended", bnext);
playPause.addEventListener("click", bpp); playPause.addEventListener("click", bpp);
immerse(); immerse();
@ -49,30 +50,30 @@ function immerse() {
//set duration //set duration
let duration; let duration;
function setduration() { function setDuration() {
duration = video.duration; duration = video.duration;
} }
//progress //progress
function setprogress() { function setProgress() {
video.currentTime = progress.value / 1000 * duration; video.currentTime = progress.value / 1000 * duration;
updateDisplay(); updateDisplay();
} }
let progresspercent, let progressPercent,
bufferpercent, bufferPercent,
remainingTime remainingTime
function updateDisplay() { function updateDisplay() {
progresspercent = (video.currentTime / duration * 100).toFixed(4) progressPercent = (video.currentTime / duration * 100).toFixed(4)
bufferpercent = (video.buffered.length == 0 ? 0 : video.buffered.end(video.buffered.length - 1) / duration * 100).toFixed(4) bufferPercent = (video.buffered.length == 0 ? 0 : video.buffered.end(video.buffered.length - 1) / duration * 100).toFixed(4)
remainingTime = duration - video.currentTime remainingTime = duration - video.currentTime
document.documentElement.style.setProperty("--progress", progresspercent + "%"); document.documentElement.style.setProperty("--progress", progressPercent + "%");
document.documentElement.style.setProperty("--buffer", bufferpercent + "%"); document.documentElement.style.setProperty("--buffer", bufferPercent + "%");
elapsed.innerHTML = toTS(video.currentTime); elapsed.innerHTML = toTS(video.currentTime);
remaining.innerHTML = toTS(remainingTime); remaining.innerHTML = toTS(remainingTime);
progress.value = Math.floor(progresspercent * 10) progress.value = Math.floor(progressPercent * 10)
} }
function toTS(sec) { function toTS(sec) {
@ -94,13 +95,13 @@ function toTS(sec) {
let islooped; let islooped;
function playcheck() { function playCheck() {
if (!islooped && !video.paused) { if (!islooped && !video.paused) {
islooped = true; islooped = true;
updateDisplay(); updateDisplay();
setTimeout(function () { setTimeout(function () {
islooped = false; islooped = false;
playcheck(); playCheck();
}, 50) }, 50)
} }
} }
@ -134,16 +135,16 @@ let oldlevel;
function bmute() { function bmute() {
if (video.volume == 0) { if (video.volume == 0) {
updatevolume(oldlevel) updateVolume(oldlevel)
} else { } else {
oldlevel = video.volume * 100 oldlevel = video.volume * 100
updatevolume(0) updateVolume(0)
} }
} }
let level; let level;
function updatevolume(a) { function updateVolume(a) {
if (a == null) { if (a == null) {
level = volume.value; level = volume.value;
} else { } else {