JavaScript を使用して時計を表示する html ファイルがあります。この html を変更して、クロックの下でループ ビデオも再生したいと考えています。ただし、時計がアクティブな場合、ビデオは表示されません。クロックを無効にすると機能します(クロックdivをコメントアウトします)。これを修正する方法を知っている人はいますか?CSS/HTML/JavaScript がごちゃごちゃになっていてすみません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Javascript Clock</title><script language="JavaScript" type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
var hsec=Math.floor(today.getMilliseconds());
// add a zero in front of numbers<10
document.getElementById('txt').innerHTML=h+":"+checkTime(m)+":"+checkTime(s)+":"+checkHTime(hsec);
document.getElementById('cal').innerHTML=checkTime(month)+"/"+checkTime(day)+"/"+year;
setTimeout('startTime()',10);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
function checkHTime(i)
{
if (i<100)
{
if (i<10)
{
i="0" + i;
}
i="0" + i;
}
return i;
}
</script></head>
<body onload="startTime()" bgcolor="black">
<center><br><br><br><img style="width: 776px; height: 133px;" alt="ad" src="ad-logo-pms2945% 20png.png"><br><br>
<div id="txt" style="font-family: serif; font-size: 30pt; font-weight: bold; color: red;">00:00:00:00</div>
<div id="cal" style="font-family: serif; font-size: 30pt; font-weight: bold; color: red;>"00/00/0000</div>
<div id="video">
<video id="duck-movie" height="240">
<source src="duck.mp4" type="video/mp4">
Video is unavailable
</video>
</div>
</center>
</body></html>
編集:「video」divを「txt」および「cal」divの上に移動すると、ビデオが再生され、時計が正常に動作します。