检索HTML5视频时长的问题

更新:好的,虽然我没有完全解决这个问题,但我确实找到了一个处理我最关心的工作......用户体验.

首先视频没有开始加载,直到观众点击播放按钮,所以我假设持续时间信息不可用(我不知道如何解决这个特定问题...虽然我假设它只涉及将视频元数据与视频分开加载,但我甚至不知道这是否可行).

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

我知道......它的作弊.但是现在它让我开心:)

那说...如果有人知道如何从视频文件中分别加载视频元数据...请分享.我认为应该彻底解决这个问题.

---

我正在开发一个带有自定义界面的HTML5视频播放器,但是我在显示视频持续时间信息方面遇到了一些问题.

我的HTML非常简单(见下文)

 
0 of 0
  

我用来获取和插入持续时间的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;

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

1> Mikushi..：

---

去做:

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

---

谢谢,比接受的答案(imo)更清洁.

---

而不是像在接受的答案中那样连续轮询,只要视频知道它的元数据可用,就会立即调用.确实更干净.

---

什么是"myVideoPlayer":var myVideoPlayer = $('#myvideo').get(0); ？

---

这很棒!我的页面上有一些视频,我很想收集所有的持续时间.有没有办法动态地执行此操作(不复制每个视频的代码？)我正在使用jQuery.

2> stopsatgreen..：

---

问题出在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上的媒体元素属性的更多信息.

---

有关更清洁的解决方案,请参阅下面的@Mikushi答案