Question

我想创建JS代码，在加载页面时自动输出视频长度。我在加载功能上使用了body，但它不起作用。我尝试使用onlick按钮执行相同的功能，它的工作原理。有人pelase可以解释为什么“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>

Answer 1

导致页面加载并不意味着加载了视频。您需要等待视频元数据：

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

More

JavaScrpit onload / onclick

1 个答案: