Загрузка видео одно за другим приводит к зависанию веб-сайта PHP ⇐ Apache

[Anonymous]

У меня есть веб-сайт PHP, размещенный на моем Raspberry Pi 4 с 8 ГБ ОЗУ с использованием Apache2. Это просто веб-сайт, который показывает время во время воспроизведения видео сзади. Видео хранятся на Pi, а не на клиенте.У меня есть элемент видео в моем файле index.php с функцией привязки событий onended, которая получает путь к следующему видеофайлу (например, /Media/video_name.mp4), хранящийся в массиве внутри моего файла JavaScript. Затем он устанавливает источник видеоэлемента (

Код: Выделить всё

src

) на новый новый источник.
Однако после некоторого запуска и многократной смены источника видео весь веб-сайт зависает. Текст часов больше не меняется. Видео либо зависло, либо полностью белое (думаю, зависает между загрузкой видео). Это происходит при запуске веб-сайта на Pi, а также на моем ПК. Я начинаю думать, что это связано с кешем памяти или самим видеоэлементом.
Я всегда запускаю свой веб-сайт, используя URL-адрес "https://website/index.php" даже на самом сервере (вместо использования localhost).
Кроме того, у меня возникает ошибка net::ERR_CERT_COMMON_NAME_INVALID, поскольку у меня недействительный сертификат для моего веб-сайта HTTPS. Возможно, это связано?
Я заметил эту проблему после обновления моего сайта для использования PHP и HTTPS. Мой index.html стал index.php. Я также создал личный сертификат для своего HTTPS, который не является доверенным, и который выдает мне предупреждение при каждом доступе к веб-сайту.
Вот код, который я использовал для тестирования, чтобы увидеть, что стал причиной аварии. Этот код отображает только видео, которые вызывают зависание после часа работы при использовании коротких видеороликов и через 12 часов при использовании более длинных видеороликов.

Код: Выделить всё

index.php

:

Код: Выделить всё

Your browser does not support HTML5 video.

[img]script.js[/img]

Код: Выделить всё

script.js

:

Код: Выделить всё

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;
};

Я попытался установить для src видео значение "", а затем вызвать video.load(), чтобы очистить всю используемую память. Я также добавлял вызов video.load() после того, как устанавливал источник видео.
Я пытался запустить свой веб-сайт с минимальным количеством видео ( ни часов, ни плейлистов) и работает не менее 12 часов, когда речь идет о GIF-файлах (с использованием элемента img). Это также сработало для более длинных видео (3–5 минут), потому что я не так часто меняю источник видео.
Я хочу, чтобы мой веб-сайт работал круглосуточно без необходимость пройти через «предупреждение о ненадежном сертификате» и избежать его зависания.
Я тестировал свою программу только с использованием PHP, потому что я перешел с HTML на PHP, не меняя свой HTML (или PHP в в этом случае) или мой код JavaScript. Проблема начала проявляться сразу после перехода. Поэтому я предположил, что речь идет о PHP, и не стал заниматься дальнейшим исследованием обычного HTML-файла. Веб-сайт зависает на моем компьютере, пока сервер работает на моем Pi. Я все еще могу управлять своим Pi, пока веб-сайт на моем компьютере завис.
Я также пробовал ответить в следующей теме, но безуспешно. Тот же результат: как изменить источник видео html5 с помощью javascript без сбоя Chrome или утечки памяти?
На моем компьютере установлен браузер Chrome версии 130.0.6723.117, работающий под управлением Windows 11 Home. Сборка 22621.4317. Браузер на моем Raspberry Pi 4 с 8 ГБ ОЗУ — Chromium (последняя версия), работающий на Raspbian Release 11 uname 6.1.21-v8+. Браузер "зависает" так как ни при каких действиях я ничего не делаю в браузере. Предупреждение в Chromium указывает на то, что страница не отвечает, и спрашивает, хочу ли я закрыть страницу, которая ничего не делает. Мне нужно нажать ALT+F4 и снова открыть страницу, чтобы веб-сайт снова заработал. Когда он зависает на моем PI, сервер по-прежнему отвечает, и к нему можно получить доступ с моего ПК.
Поскольку Pi требует меньше времени для зависания Chromium, я регистрировал использование ЦП и памяти. хрома от начала зависать на Raspbian. Вот данные:
Данные о запуске: S | 173,8% ЦП | 2,6% МЭМ | 2:05.97 ВРЕМЯ+ | Браузер Chromium



Время
CPU%
MEM%




10:04
37.0
2.2


10ч14< ш/>168,9
2,8


10ч26
203.0
2.9


10ч34< ш/>136,2
3,2


10ч55
172,1
2,2


11h0462,3
2,6


11h10 [F]< /td>
ЗАМОРАЖИВАНИЕ
ЗАМОРАЖИВАНИЕ


11:2053,6
3,4



Браузер завис на 11:10. Я записал окончательные данные через 10 минут после заморозки.
Обновить
Я попробовал передать источник видео через URL-адрес (таким образом «изменив веб-страницу»). вместо того, чтобы менять источник моего видео после наличия другого источника. Этот метод не решил мою проблему, и через некоторое время веб-сайт по-прежнему не отвечал.

Подробнее здесь: https://stackoverflow.com/questions/791 ... hp-website