从文件中单独检索 HTML5 视频时长 [英] Retrieving HTML5 video duration separately from the file

问题描述

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

I am working on building a HTML5 video player with a custom interface, but I am having some problems getting the video duration information to display.

我的 HTML 很简单:

My HTML is simple:

<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 是

And the javascript I am using to get and insert the duration is

var duration = $('#duration').get(0);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

问题是什么都没发生.我知道视频文件有持续时间数据，因为如果我只使用默认控件，它显示正常.

The problem is nothing happens. I know the video file has the duration data because if I just use the default controls, it displays fine.

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

But the real strange thing is if I put alert(duration) in my code like so

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

然后它工作正常(减去弹出的烦人警报).任何想法这里发生了什么或我如何解决它?

then it works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?

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

UPDATE: Ok so although I haven't solved this problem exactly, but I did figure out a work around that handles my biggest concern... the user experience.

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

First the video doesn't begin loading until after the viewer hits the play button, so I am assuming that the duration information wasn't available to be pulled (I don't know how to fix this particular issue... although I assume that it would involve just loading the video metadata separately from the video, but I don't even know if that is possible).

所以为了避免没有持续时间数据的事实，我决定完全隐藏持续时间信息(实际上是整个控件)，直到你点击播放.

So to get around the fact that there is no duration data, I decided to hide the duration info (and actually the entire control) completely until you hit play.

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

That said, if anyone knows how to load the video metadata separately from the video file, please share. I think that should completely solve this problem.

推荐答案

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

The issue is in WebKit browsers; the video metadata is loaded after the video so is not available when the JS runs. You need to query the readyState attribute; this has a series of values from 0 to 4, letting you know what state the video is in; when the metadata has loaded you'll get a value of 1.

因此您需要执行以下操作:

So you need to do something like:

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

我还没有测试过那个代码，但它(或类似的东西)应该可以工作.

I haven't tested that code, but it (or something like it) should work.

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

There's more information about media element attributes on developer.mozilla.org.

这篇关于从文件中单独检索 HTML5 视频时长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！