javascript - 从文件中单独检索 HTML5 视频持续时间

Question

我正在构建一个带有自定义界面的 HTML5 视频播放器，但我在获取显示视频时长信息时遇到了一些问题。

我的 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;

问题是没有任何反应。我知道视频文件有持续时间数据，因为如果我只使用默认控件，它可以正常显示。

但真正奇怪的是，如果我像这样在我的代码中放置 alert(duration)

alert(duration);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

然后它工作正常(减去弹出的恼人警报)。知道这里发生了什么或者我该如何解决它吗？

更新:好的，虽然我还没有完全解决这个问题，但我确实找到了解决我最关心的问题的方法......用户体验。

首先，视频在观看者点击播放按钮后才会开始加载，所以我假设无法提取持续时间信息(我不知道如何解决这个特定问题......虽然我假设它只涉及从视频中单独加载视频元数据，但我什至不知道这是否可能)。

因此，为了避免没有持续时间数据这一事实，我决定完全隐藏持续时间信息(实际上是整个控件)，直到您点击播放。

就是说，如果有人知道如何从视频文件中单独加载视频元数据，请分享。我认为这应该可以彻底解决这个问题。

Answer 1

这样做:

var myVideoPlayer = document.getElementById('video_player');
myVideoPlayer.addEventListener('loadedmetadata', function() {
    console.log(myVideoPlayer.duration);
});

当浏览器收到视频中的所有元数据时触发。

[编辑] 从那时起，更好的方法是听“durationchange”而不是“loadedmetadata”，后者可能不可靠，例如:

myVideoPlayer.addEventListener('durationchange', function() {
    console.log('Duration change', myVideoPlayer.duration);
});