检索HTML5video时间的问题
更新：好吧，虽然我没有完全解决这个问题，但我确实找出了一个解决办法，处理我最大的担心…用户体验。
首先，video直到观看者点击播放button之后才开始加载，所以我假定持续时间信息不可用于被拉（我不知道如何解决这个特定的问题…尽pipe我假设这将涉及到从video中分别加载video元数据，但我甚至不知道这是可能的）。
所以为了解决没有持续时间数据的事实，我决定完全隐藏持续时间信息（实际上是整个控制），直到你进行游戏。
我知道…它的作弊。 但现在这让我开心:)
这就是说…如果有人知道如何加载video元数据与video文件分开…请分享。 我认为应该彻底解决这个问题。
我正在build立一个自定义界面的HTML5video播放器，但我有一些问题，获取video持续时间信息显示。
我的HTML是真正简单的（见下文）
<video id="video" poster="image.jpg" controls> <source src="video_path.mp4" type="video/mp4" /> <source src="video_path.ogv" type="video/ogg" /> </video> <ul class="controls"> <li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li> </ul> 而我正在使用的JavaScript来获取和插入的持续时间是
var duration = $('#duration').get(0); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration;
问题没有任何反应。 我知道video文件有持续时间的数据，因为如果我只是使用默认的控件，它显示正常。
但真正奇怪的是，如果我把alert（持续时间）放在我的代码中，像这样
alert(duration); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration;
然后是正常工作（减去恼人的警报popup）。 任何想法这里发生了什么，或者我可以如何解决它？
这个问题是在WebKit浏览器中; video元数据在video之后加载，所以在JS运行时不可用。 您需要查询readyState属性; 这有一系列的值从0到4，让你知道什么状态的video是在; 当元数据已经加载，你会得到1的值。
所以你需要做一些事情：
window.setInterval(function(t){ if (video.readyState > 0) { var duration = $('#duration').get(0); var vid_duration = Math.round(video.duration); duration.firstChild.nodeValue = vid_duration; clearInterval(t); } },500);
我没有testing过这个代码，但它（或类似的东西）应该可以工作。
关于developer.mozilla.org上媒体元素属性的更多信息。
去做：
var myVideoPlayer = document.getElementById('video_player'); myVideoPlayer.addEventListener('loadedmetadata', function() { console.log(myVideoPlayer.duration); });
当浏览器收到video中的所有元数据时触发。
从那时起，更好的方法是听取'durationchange'而不是'loadedmetadata'，这可能是不可靠的，因此：
myVideoPlayer.addEventListener('durationchange', function() { console.log('Duration change', myVideoPlayer.duration); });
HTML5规范只允许预加载元数据：
<video id="video" poster="image.jpg" controls preload="metadata"> <source src="video_path.mp4" type="video/mp4" /> <source src="video_path.ogv" type="video/ogg" /> </video>
http://www.w3.org/TR/html-markup/video.html#video.attrs.preload
这是对你的代码的修改
var duration = document.getElementById("duration"); var vid_duration = Math.round(document.getElementById("video").duration); //alert(vid_duration); duration.innerHTML = vid_duration; //duration.firstChild.nodeValue = vid_duration;
希望这可以帮助。
它看起来像你使用IE浏览器，为什么不使用document.getElementById方法检索video对象？
我遇到了同样的问题：无法读取video的持续时间， $('video')[0].duration总是返回NaN ，我参考@stopsatgreen的接受的答案，并更改代码，以适应一个常见的情况下，它真的工作。
var video = $('video')[0]; var t = setInterval(function () { if(video.readyState > 0) { var duration = video.duration; console.log(duration); clearInterval(t); } }, 500);
代码是非常简单的，真的工作，所以我张贴这个答案，并希望它可以帮助更多的人。
