我正在制作一个带有视频的网页。我想根据窗口的大小更改视频的大小。
下面的代码是我的HTML代码：
<video id="video" controls="controls" poster="images/video_poster.png" width="320" height="240">
<source src="video/Minions.mp4" type="video/mp4">
<source src="video/Minions.ogv" type="video/ogg">
</video>
我的脚本代码如下：
<script>var video = document.getElementById("video");
function changeVideoSize() {
console.log("width is: ", window.innerWidth)
if (window.innerWidth > 900) {
video.width = "640";
video.height = "480";
}
else {
video.width = "320";
video.height = "240";
}
}
window.addEventListener("resize", changeVideoSize)
function init() {
}
init();
</script>
首先，我把这个脚本代码放在head标记的末尾，它出现了一个错误"；无法设置null的属性(设置"width"("。
我被这个错误困扰了一个小时。。。然后经过多次不同的尝试，我把它放在身体标签的末尾，它起了作用。
为什么？把它放在头上和身体上的主要区别是什么？？我应该总是把script标记放在body标记的末尾吗？还是取决于具体情况？
首先，从top to bottom解析HTML，所以无论第一次遇到什么，都会运行。
如果你把script标记放在head标记的末尾，那么它会在HTMLbody之前先运行，所以你不能设置width，因为当你使用时
document.getElementById("video")
它将返回null，因此您不能在null上设置属性。因为在执行此语句时，元素不存在。
<html>
<head>
<script>
const heading = document.querySelector("h1");
console.log(heading); // null
</script>
</head>
<body>
<h1> This is heading</h1>
</body>
</html>因此，您必须将script标记放在body标记的末尾。这样，当JS被解析并执行时，它就可以找到HTML元素并执行语句。
<html>
<head>
</head>
<body>
<h1> This is heading</h1>
<script>
const heading = document.querySelector("h1");
console.log(heading); // h1 element
</script>
</body>
</html>这是因为纯序列。在这种情况下，解释器从上到下进行读取。如果头中的代码显示get-me元素X，而它还不在DOM中，那么它就是null。页脚不同，元素x已经加载到DOM中，这就是脚本工作的原因。在大多数情况下，JS总是在结束body标记之前。
基本上，当您将其放入head标记时，脚本在body标记之前进行解析。所以在id为video的文档中没有视频标签。使用具有defer属性的外部脚本，或者将脚本放在标记内的html代码下面。抱歉我英语不好。