Das Laden von Videos nacheinander friert die PHP-Website ein ⇐ HTML

[Guest]

Ich habe eine PHP-Website, die von meinem Raspberry Pi 4 mit 8 GB RAM und Apache2 gehostet wird. Es ist nur eine Website, die die Uhrzeit anzeigt, während im Hintergrund Videos abgespielt werden. Die Videos werden auf dem Pi gespeichert, nicht auf dem Client.Ich habe ein Videoelement in meiner index.php-Datei mit einer onended ereignisgebundenen Funktion, die Ruft den nächsten Videodateipfad (z. B. /Media/video_name.mp4) ab, der in einem Array in meiner JavaScript-Datei gespeichert wird. Anschließend wird die Quelle des Videoelements festgelegt (

Code: Select all

src

) zu einer neuen neuen Quelle.
Nach einer Weile des Ausführens und mehrmaligen Änderns der Videoquelle friert jedoch die gesamte Website ein. Der Uhrtext ändert sich nicht mehr. Das Video bleibt entweder hängen oder ist völlig weiß (friert wohl zwischen dem Laden des Videos ein). Dies passiert sowohl beim Ausführen der Website auf dem Pi als auch auf meinem PC. Ich fange an zu glauben, dass es etwas mit dem Speichercache oder dem Videoelement selbst zu tun hat.
Ich betreibe meine Website immer mit der URL „https://website/index.php“. sogar auf dem Server selbst (anstatt localhost zu verwenden).
Außerdem habe ich den Fehler net::ERR_CERT_COMMON_NAME_INVALID, weil ich ein ungültiges Zertifikat für meine HTTPS-Website habe. Vielleicht hängt das damit zusammen?
Ich habe dieses Problem entdeckt, nachdem ich meine Website auf die Verwendung von PHP und HTTPS aktualisiert habe. Meine index.html wurde zu index.php. Ich habe auch ein persönliches Zertifikat für mein HTTPS erstellt, das „nicht vertrauenswürdig“ ist und mir bei jedem Zugriff auf die Website eine Warnung ausgibt.
Hier ist der Code, den ich verwendet habe, um Tests durchzuführen, um zu sehen, was verursachte den Absturz. Dieser Code zeigt nur Videos an, was bei kurzen Videos nach einer Stunde und bei längeren Videos nach 12 Stunden zum Einfrieren führt.

Code: Select all

index.php

:

Code: Select all

Your browser does not support HTML5 video.

[img]script.js[/img]

Code: Select all

script.js

:

Code: Select all

const video_list = [
["dog.mp4", "cat.mp4", "bird.mp4", "hamster.mp4"]
, ["tokyo.mp4", "berlin.mp4", "france.mp4", "london.mp4"]
, ["gif 1.gif", "gif 2.mp4", "gif 3.gif", "gif 4.gif"]
];
const dir_paths = ["./animals/", "./cities/", "./gifs/"];

const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var clockTimer;
var videoTimeout;

var video = document.getElementById("myVideo");
var GIF = document.getElementById("myGIF");
var media_title = document.getElementById('video_name');
var video_index = 0;
var playlist_index = 0;

function onLoad() {
startTime();
shuffle(video_list[0]);
video.loop = false;
NextMedia();
};

function NextMedia() {
video_index++;
if (video_index >= video_list[0].length) {
video_index = 0;
shuffle(video_list[0]);
}
media_src = dir_paths[0].concat(video_list[0][video_index]);
document.getElementById('video_name').innerHTML = media_src;
setMediaVisibility(media_src);
// Sets the video name text
media_title.innerHTML = video_list[0][video_index];
}

function setMediaVisibility(media_src) {
video.style.visibility = "collapse";
GIF.style.visibility = "collapse";
// Verify if the file is a video
if (media_src.toLowerCase().substr(media_src.length - 4).localeCompare("webm") == 0
|| media_src.toLowerCase().substr(media_src.length - 3).localeCompare("mp4") == 0
|| media_src.toLowerCase().substr(media_src.length - 3).localeCompare("mov") == 0
|| media_src.toLowerCase().substr(media_src.length - 3).localeCompare("avi") == 0) {
video.style.visibility = "visible";
video.src = media_src;
video.play();
}
if (media_src.toLowerCase().substr(media_src.length - 3).localeCompare("gif") == 0
|| media_src.toLowerCase().substr(media_src.length - 3).localeCompare("jpg") == 0
|| media_src.toLowerCase().substr(media_src.length - 4).localeCompare("jpeg") == 0
|| media_src.toLowerCase().substr(media_src.length - 4).localeCompare("webp") == 0) {
GIF.style.visibility = "visible";
GIF.src = media_src;
}
}

function getPlaylist() {
return video_list[playlist_index];
}

function shuffle(array) {
var currentIndex = array.length, randomIndex;

// While there remain elements to shuffle.
while (currentIndex != 0) {

// Pick a remaining element.
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;

// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}

return array;
};

function startTime() {
clearTimeout(clockTimer);
const today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var day = weekday[today.getDay()];
var date = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
date = checkTime(date);
month = checkTime(month);

document.getElementById('time_txt').innerHTML = h + ":" + m + ":" + s;
document.getElementById('date_txt').innerHTML = day + " " + year + "/" + month + "/" + date;
clockTimer = setTimeout(startTime, 1000);
};

function checkTime(i) {
if (i < 10) { i = "0" + i };   // add zero in front of numbers < 10
return i;
};

Ich habe versucht, den src des Videos auf „“ zu setzen und dann video.load() aufzurufen, um den verwendeten Speicher zu löschen. Ich habe auch den Aufruf video.load() hinzugefügt, nachdem ich den Quellcode meines Videos festgelegt habe.
Ich habe versucht, meine Website mit dem Nötigsten für das Video auszuführen ( keine Uhren, keine Wiedergabelisten) und es funktioniert mindestens 12 Stunden lang, wenn es um GIFs geht (unter Verwendung eines img-Elements). Es hat auch bei längeren Videos (3–5 Minuten) funktioniert, da ich die Videoquelle meiner Meinung nach nicht so stark ändere.
Ich möchte, dass meine Website rund um die Uhr ohne funktioniert die Notwendigkeit, die Warnung „Nicht vertrauenswürdiges Zertifikat“ durchzugehen, ohne dass sie einfriert.
Ich habe mein Programm nur mit PHP getestet, weil ich von HTML auf PHP umgestiegen bin, ohne mein HTML (oder PHP in) zu ändern in diesem Fall) oder meinen JavaScript-Code. Unmittelbar nach der Umstellung trat das Problem auf. Daher ging ich davon aus, dass es sich um PHP handelte, und untersuchte es nicht weiter mit einer regulären HTML-Datei. Die Website friert auf meinem PC ein, während der Server auf meinem Pi läuft. Ich kann meinen Pi weiterhin bedienen, während die Website auf meinem PC eingefroren ist.
Ich habe die Antwort auch im folgenden Thread versucht, aber ohne Erfolg. Gleiches Ergebnis: Wie ändere ich den Quellcode eines HTML5-Videos über Javascript, ohne dass Chrome abstürzt oder Speicher verloren geht?
Der Browser auf meinem PC ist Chrome Version 130.0.6723.117 und läuft unter Windows 11 Home Bauen Sie 22621.4317. Der Browser auf meinem Raspberry Pi 4 8 ​​GB RAM ist Chromium (neueste Version) und läuft unter Raspbian Release 11 uname 6.1.21-v8+. Der Browser „friert“ ein, da jede Aktion, die ich ausführe, nichts im Browser bewirkt. Eine Warnung auf Chromium weist darauf hin, dass die Seite nicht reagiert, und fragt, ob ich die Seite schließen möchte, was jedoch nichts bewirkt. Ich muss ALT+F4 drücken und die Seite erneut öffnen, um die Website wieder zum Laufen zu bringen. Wenn es auf meinem PI einfriert, reagiert der Server immer noch und kann von meinem PC aus darauf zugegriffen werden.
Da der Pi weniger Zeit zum Einfrieren von Chromium benötigt, habe ich die CPU- und MEM-Nutzung protokolliert Chrom vom Start bis zum Einfrieren auf Raspbian. Hier sind die Daten:
Daten zum Start: S | 173,8 % CPU | 2,6 % MEM | 2:05.97 ZEIT+ | Chromium-Browser



Zeit
CPU%
MEM%




10h04
37,0
2,2


10h14168,9
2,8


10h26
203,0
2,9


10h34136,2
3,2


10h55
172,1
2,2


11h0462,3
2,6


11h10 [F]< /td>
FREEZE
FREEZE


11h2053,6
3,4



Der Browser ist um 11:10 Uhr eingefroren. Ich habe die endgültigen Daten 10 Minuten nach dem Einfrieren protokolliert.
Update
Ich habe versucht, die Videoquelle über die URL zu übergeben (also „Webseite ändern“). anstatt die Quelle meines Videos zu ändern, nachdem ich eine andere Quelle habe. Diese Methode hat mein Problem nicht behoben und die Website reagierte nach einer Weile immer noch nicht mehr.
Ich habe auch versucht, die Website „lokal“ auszuführen. Ich habe es als einfache HTML-Datei in meinem Browser statt über Apache ausgeführt und die Website friert immer noch ein. Daher hängt es möglicherweise nicht mit Apache oder meinem HTTPS- oder PHP-Setup zusammen. Ich schätze, der Fehler war schon immer da und ich habe ihn zu diesem Zeitpunkt zufällig bemerkt.
Nachdem ich die Leistungen mithilfe der Registerkarte „Leistung“ in den Chrome-Entwicklungstools gemessen habe, habe ich einen Vergleich durchgeführt zwei 390 Sekunden lange Leistungsanalysen. Der erste ist direkt nach dem Start der Website. Die zweite Aufnahme erfolgt 4 Stunden später. Hier ist die Vergleichstabelle:



Zu Beginn
4 Stunden
8 Stunden



JS Heap
2,8 MB – 3,8 MB
3,0 MB – 4,2 MB
3,4 MB – 4,3 MB< /td>


Dokumente
1 - 1
1 - 2
1 - 1


Knoten
565 - 1238
565 - 1184
565 - 1142


Hörer
95–127
95–125
95–521


GPU-Speicher
Nichts
Nichts
Nichts



Ich sehe nichts irgendetwas Ungewöhnliches mit dieser Datentabelle.
In einer anderen Anmerkung habe ich von etwas namens „Javascript-Limit“ gehört. Möglicherweise muss ich das untersuchen.