检索HTML5视频时间的问题 [英] Problem retrieving HTML5 video duration

问题描述

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

<首先，视频直到观看者点击播放按钮后才开始加载，所以我假设持续时间信息不可用于拉取（我不知道如何解决这个特定问题...虽然我假设它只涉及将视频元数据与视频分开加载，但我甚至不知道是否可能。）

所以要绕过这个事实没有持续时间数据，我决定完全隐藏持续时间信息（实际上是整个控制）直到你上场。

我知道......它的作弊。但现在它让我开心：）

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

---

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

我的HTML非常简单（见下文）

 < video id =videoposter =image.jpgcontrols> 
< source src =video_path.mp4type =video / mp4/> 
< source src =video_path.ogvtype =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）; 
 var vid_duration = Math.round（video.duration）; 
 duration.firstChild.nodeValue = vid_duration; 
  

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

这个问题出现在WebKit浏览器中;视频元数据在视频后加载，所以在JS运行时不可用。你需要查询readyState属性;它有一系列从0到4的值，让你知道视频在哪个状态;当元数据加载时，你将得到一个值。

所以你需要做类似的事情：

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

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

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

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.

I know... its cheating. But for now it makes me happy :)

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.

---

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.

My HTML is real simple (see below)

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

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.

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 is works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?

解决方案

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.

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

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