JavaScript不同的行为onload / onclick [重复]
Posted
技术标签:
【中文标题】JavaScript不同的行为onload / onclick [重复]【英文标题】：JavaScrpit different behaviour onload / onclick [duplicate] 【发布时间】：2018-02-18 17:47:06 【问题描述】：我想创建在页面加载时自动输出视频长度的 JS 代码。我使用了 body on load 功能，但它不起作用。我尝试使用带有按钮的 onlick 执行相同的功能，它可以工作。有人可以解释一下为什么“onload”不起作用/如何解决它，因此用户不必单击按钮即可查看视频的持续时间并自动输出？当我使用按钮时，它会正确显示持续时间，但是在使用 onload 功能时，它只显示“NaN”。 感谢帮助！ 拉德克
<!DOCTYPE html>
<html>
<body onload = "myFunction()">
<video 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 ，非常感谢，我找到了。解决了我的问题:) 【参考方案1】：因为加载的页面并不意味着加载的视频。您需要等待视频元数据：
window.onload = _ =>
const video = document.getElementById("video");
video.addEventListener('loadeddata', _ =>
alert(video.duration);
, false);
;
More
【讨论】：
以上是关于JavaScript不同的行为onload / onclick [重复]的主要内容，如果未能解决你的问题，请参考以下文章