JavaScript不同的行为onload / onclick [重复]答案

【问题标题】：JavaScrpit different behaviour onload / onclick [duplicate]JavaScript不同的行为onload / onclick [重复]
【发布时间】：2018-02-18 17:47:06
【问题描述】：

我想创建在页面加载时自动输出视频长度的 JS 代码。我使用了 body on load 功能，但它不起作用。我尝试使用带有按钮的 onlick 执行相同的功能，它可以工作。有人可以解释一下为什么“onload”不起作用/如何解决它，因此用户不必单击按钮即可查看视频的持续时间并自动输出？当我使用按钮时，它会正确显示持续时间，但是在使用 onload 功能时，它只显示“NaN”。感谢帮助！拉德克

<!DOCTYPE html> 
<html> 
<body onload = "myFunction()"> 

<video width="400" controls id = "video">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
<p id = "demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    var x = document.getElementById("video").duration;
    alert(x);
}
</script>
</body> 
</html>

【问题讨论】：

@JJJ ，非常感谢，我找到了。解决了我的问题:)

标签： javascript html function onload

【解决方案1】：

因为加载的页面并不意味着加载的视频。您需要等待视频元数据：

window.onload = _ => {
  const video = document.getElementById("video");
  video.addEventListener('loadeddata', _ => {
     alert(video.duration);
  }, false);
};

【讨论】：