Question

我正在尝试计算html 5视频的测量时间。我使用javascript听取html5视频事件loadstart和canplaythrough使用：

media.addEventListener('loadstart'getStartTime(){
 startTime = new Date().getTime();},
 false)

和endTime一样，事件设置为canplaythrough来监听。但是我无法获得任何数据。

有人可以指导我如何使用javascript测量视频加载时间。

感谢您的回复，但解决方案是我相信使用jQuery。但是，我想知道是否有可能从JavaScript。我附上了我的代码副本：

function loadVideo（）{ var timeNow = Date.now（），timeStartLoad，timeFinishLoad; myVideos = new Array（）; myVideos [0] =“trailer.mp4”; myVideos [1] =“trailer.ogg”; myVideos [2] =“trailer.m4v”; var videoId = document.getElementById（'idForVideo'）; var video = document.createElement（'video'）; for（var i = 0; i

}但是我对timestartLoad和timeFinishLoad都没有定义。我的html正文有onload方法链接到这个函数。

Answer 1

您的代码存在一些（复制和粘贴）语法问题。

var timeInit = Date.now(), timeLoad, timeCanPlay;

$("movie").addEventListener('loadstart', function(){
  timeLoad = Date.now();
    $("t1").innerHTML = "load: " + (timeLoad - timeInit) + " msecs";
});

$("movie").addEventListener('canplaythrough', function(){
  timeCanPlay = Date.now();
  $("t2").innerHTML = "canplay: " + (timeCanPlay - timeLoad) + " msecs";
});

$("movie").src = "http://ia600208.us.archive.org/12/items/FarSpeak1935/FarSpeak1935_512kb.mp4";

$("movie").play();

试用：http://jsfiddle.net/noiv/98xZP/：

Answer 2

嘿，我明白了。原因似乎是由于浏览器的快速响应性，即使事件被捕获，它也会获取数据。歌剧提供的解决方案似乎有效。在内联脚本中包含事件侦听器，并为window对象创建addEventListener。更多详情： http://dev.opera.com/articles/view/consistent-event-firing-with-html5-video/

Answer 3

虽然我无法发表评论，但我已经为@noiv上面的小提琴添加了一个分叉，因为小提琴有一些JS错误。谢谢@noiv让我朝着正确的方向前进。

http://jsfiddle.net/truedat101/Gbfj2/7/

$("movie").addEventListener('loadstart', function(){
    timeLoad = Date.now();
    console.log("loadstart event time: " + timeLoad + ", delta: " + (timeLoad - timeInit));
    // alert("loadstart event time: " + timeLoad + ", delta: " + (timeLoad - timeInit));
});

值得注意的是，whatwg试图在浏览器中围绕视频指标进行一些统一，因此浏览器会支持一些常见的属性，尽管看起来已经将这项工作分成了各个方面， Mozilla支持他们自己的指标，Chromium团队支持他们，以及支持他们的Apple Safari。

HTML5视频加载时间

3 个答案: