javascript - 无法在 html 中播放视频

标签 javascript css html html5-video

我有一个使用 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 上方,视频播放并且时钟运行正常。

最佳答案

您为此使用 HTML 4.01 文档类型,但视频标签不是 HTML 4.01 的一部分。尝试用

替换您当前的文档类型
<!DOCTYPE html>

关于javascript - 无法在 html 中播放视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17369822/

相关文章:

javascript - Kendo 数据源 - 主干 - 对主干模型所做的更改未在数据源中同步

html - div定位调整高宽

html - 如果文本没有包含在按钮中,那么在一些文本之后应该有 "..."

jquery - Datatables 1.10 - TD 中的 HTML5 "data-order"attr 无效

html - 没有内容高度设置问题的纯 css 垂直选项卡

javascript - 在 JQGrid 的一列中添加超链接,然后单击“超链接”应调用 Jquery 函数

javascript - 在列表的最后添加 div,但我在设计中遇到错误

javascript - document.currentScript 为空

jquery datepicker 将 css 应用于后续类

jquery - 用本地镜像替换 jquery ui-icon