After an effort (since Iam not a web programmer) I managed to come up with this code which will play videos that I list inside the code. What I want is that the code reads the directory content automatically and re-check for new files every time the player finishes playing the last video file.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html dir="ltr">
<head>
<meta http-equiv="Content-Type; content=text/html; charset=windows-1252">
<title></title>
</head>
<body style="margin: 0;background-color: black;overflow: hidden;">
<div id="divVideo" style="width:100% ;height:100vh ;margin:0xp ;overflow: hidden;">
<video id="videoPlayer" poster="./poster.jpg" width="100%" height="100%" autoplay="true"></video>
<div id="divmarquee" style="bottom: 9%; position: relative;">
<marquee height="50px" behavior="scroll" direction="right" scrolldelay="1" scrollamount="1" overflow="hidden"><span style="font-family:Segoe UI;font-size:28px;font-weight:bold;color:yellow;text-shadow: 0px 3px 3px black;padding-bottom:0px;">أهلا بكم في مركز طيبة للعلاج الطبيعي نرحب بكم ونتمنى لكم الشفاء العاجل... يرجى العلم بانه بداية من سبتمبر 2021 سيتوجب على جميع المراجعين ابراز بطاقة التعريف لموظفة الاستقبال وذلك لتسهيل عملية ادخال البيانات....شاكرين لكم حسن تعاونكم معنا</span></marquee>
</div>
</div>
<script type="text/javascript">
let videoSource = new Array();
videoSource[0] = './Counter10.mp4';
videoSource[1] = './diab.mp4';
let i = 0; // global
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");
function videoPlay(videoNum) {
element.setAttribute("src", videoSource[videoNum]);
element.autoplay = true;
element.load();
element.play();
}
document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video
function myHandler() {
i++;
if (i == videoCount) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
</script>
</body>
</html>Any help is really appreciaed.