HTML5 视频加载时间

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<myVideos.length; i++){
        var source = document.createElement('source');
        source.setAttribute('src', myVideos[i]);
        video.appendChild(source);
    }
    video.load();
    video.addEventListener('loadstart', function(){
        timeStartLoad = Date.now() - timeNow;
        }, false);
    video.addEventListener('hasenoughdata', function(){
        timeFinishLoad = Date.now() - timeStartLoad;
        }, false);
    idForVideo.appendChild(video);
    newDiv = document.getElementById('newDiv');
    newDiv.innerHTML = "BodyLoad: " + timeNow + " " + "; Video Load: " + timeStartLoad + "; Video Loaded: " + timeFinishLoad;
    //alert(timeStartLoad);
    
} 

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

嘿，我明白了。
原因似乎是由于浏览器的快速响应能力，它甚至在捕获事件之前就获取了数据。 Opera 提供的解决方案似乎有效。在内联脚本中包含事件侦听器，并为窗口对象创建 addEventListener。
更多详情请参见：
http://dev.opera.com/articles/查看/consistency-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 支持他们的。