我有一个简短的问题。我正在尝试在HTML5中合并一个onload事件。这是我的代码，但它拒绝工作。请让我知道我做错了什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation</title>
<script>
document.getElementById('videoBackground').onload = function()
{
document.body.style.backgroundColor = 'black';
}
</script>
<script type="text/javascript" src="js/animCD.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<video id="videoBackground" poster="img/loading.png" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
<source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">
</video>
指定someElement.onload = function() { }是创建一般意义上的 onload 处理程序的方式。您的不起作用的原因是您的脚本块位于相关元素之前并立即运行，此时document.getElementById()找不到该元素，因为它尚未解析。
您可以通过将脚本块移动到元素后面的某个位置（许多人将他们的脚本放在正文的末尾）或通过在页面的 onload 处理程序中调用它来解决此问题：
window.onload = function() {
document.getElementById('videoBackground').onload = function() {
document.body.style.backgroundColor = 'black';
}
};
尽管页面/窗口的 onload 应该在所有内容加载后调用，所以我不确定从那里创建更多的 onload 处理程序有什么意义。
我注意到您的 html 中还有一个 onload="function()" 属性。这是指定处理程序的另一种方法，尽管内联事件属性不是执行操作的首选方法，但您需要放置一个实际的函数名称onload="someFunction()"以调用在其他地方定义的命名函数，或者直接放置代码：
<video ... onload="document.body.style.backgroundColor='black';" ...>
在执行getElementById('videoBackground')时，具有 id videoBackground 的元素尚不存在。
将脚本移动到创建 videoBackground 元素的位置下方，或者在使用 document.onload 加载 DOM 后运行脚本。