aziascreations/Docker-Mini-CCTV-NVR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed video sizing issue, Set volume to 0.5 by default

Browse Source 
Update index.php
This commit is contained in:
Herwin Bozet (NibblePoker) 2023-05-16 06:05:54 +02:00
parent d7538b950e
commit 8ec5d74f6c
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
htdocs/index.php
View File

@ -116,8 +116,8 @@ function sizeFormat($bytes) {
min-width: 95%; min-width: 95%;
} }
video { video {
max-height: 60vh; max-height: 60vh !important;
max-width: 95vw; max-width: 95vw !important;
border-radius: 0.5em; border-radius: 0.5em;
} }
#skippers a { #skippers a {
@ -185,7 +185,7 @@ function sizeFormat($bytes) {
} else { } else {
// We have selected one, we add the video, slider, jumpers and filename placeholder. // We have selected one, we add the video, slider, jumpers and filename placeholder.
echo("<center>"); echo("<center>");
echo("<video id=\"cctv-out\" controls></video>"); echo("<video id=\"cctv-out\" volume=\"0.5\" controls></video>");
echo("<br>"); echo("<br>");
echo("<input type=\"range\" id=\"video-selector\" min=\"0\" max=\"" . count($files) . "\" value=\"0\">"); echo("<input type=\"range\" id=\"video-selector\" min=\"0\" max=\"" . count($files) . "\" value=\"0\">");
echo("<br>"); echo("<br>");
@ -309,10 +309,14 @@ function sizeFormat($bytes) {
// Used to keep the video's frame at a constant size. // Used to keep the video's frame at a constant size.
// It looks like ass otherwise since it "flickers" between 2 sizes. // It looks like ass otherwise since it "flickers" between 2 sizes.
eVideo.addEventListener("playing", function() { eVideo.addEventListener("playing", function() {
eVideo.width = eVideo.offsetWidth; // We only change the size when not in fullscreen mode.
eVideo.height = eVideo.offsetHeight; // This helps prevent sizing issues when going out of it after a new recording starts playing.
eVideo.style.minWidth = eVideo.offsetWidth+"px"; if(document.fullscreenElement === null) {
eVideo.style.minHeight = eVideo.offsetHeight+"px"; eVideo.width = eVideo.offsetWidth;
eVideo.height = eVideo.offsetHeight;
eVideo.style.minWidth = eVideo.offsetWidth+"px";
eVideo.style.minHeight = eVideo.offsetHeight+"px";
}
}); });
// Changes the "current video" number when moving the slider. // Changes the "current video" number when moving the slider.
@ -363,6 +367,7 @@ function sizeFormat($bytes) {
// Starting up the player, the list updater loop and setting the currently played vid number. // Starting up the player, the list updater loop and setting the currently played vid number.
document.getElementById("vid-count-total").textContent = files.length; document.getElementById("vid-count-total").textContent = files.length;
playNextVideo(); playNextVideo();
eVideo.volume = 0.5;
setTimeout(updateVideoList, videoListUpdateIntervalMs); setTimeout(updateVideoList, videoListUpdateIntervalMs);
} }
}); });