与文件分开检索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很简单:

<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屋！