分别从文件中检索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() {&nbsp; &nbsp; console.log(myVideoPlayer.duration);});当浏览器收到视频中的所有元数据时触发。[edit]从那时起，更好的方法是监听'durationchange'而不是'loadedmetadata'，这可能是不可靠的，例如：myVideoPlayer.addEventListener('durationchange', function() {&nbsp; &nbsp; console.log('Duration change', myVideoPlayer.duration);});