从文件中单独检索 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;

然后它工作正常（减去弹出的恼人警报）。任何想法这里发生了什么或我如何解决它？

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

首先，视频直到观众点击播放按钮后才开始加载，所以我假设持续时间信息不可用于提取（我不知道如何解决这个特定问题……虽然我假设它只涉及从视频中单独加载视频元数据，但我什至不知道这是否可能）。

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

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

原文由 drebabels 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题出在 WebKit 浏览器中；视频元数据在视频之后加载，因此在 JS 运行时不可用。需要查询readyState属性；这有一系列从 0 到 4 的值，让你知道视频处于什么状态；加载元数据后，您将获得 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);

我没有测试该代码，但它（或类似的东西）应该可以工作。

在 developer.mozilla.org 上有更多关于媒体元素属性的信息。

原文由 stopsatgreen 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

去做：

 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);
});

原文由 Mikushi 发布，翻译遵循 CC BY-SA 3.0 许可协议