节流 HTML5 视频当前时间

Question

我有一个应用程序可以跟踪视频观看次数并将其与其他营销活动集成。为此，我需要跟踪一个人观看 html5 视频的时长，然后 post 将其返回到我的应用程序（通过 API）。我正在使用 videojs 播放器，但实际上这只是 HTML5 的 api 属性的包装器。这是一个应用程序，可以根据他们正在观看的页面加载各种视频，所以我需要一个无论视频长度如何都能跟踪的解决方案。

我遇到的问题是，当视频播放时 API 每 ~300MS 报告一次，我不想点击我的 API经常。所以我需要一个解决方案来跟踪我上次 posted 的时间。在四处寻找之后，我找不到答案，所以如果其他人有类似的需要，我对这个问题的解决方案如下。

Answer 1

我们决定我希望每 5 秒 post 我的视频观看结果，但由于我们不能保证 currentTime 会在恰好 5 秒返回，所以我们只需要四舍五入最接近的整数值。

在我的视频包装器 div 上，我添加了一个名为 data-last-time-push 的数据属性。我每次推送时 post 舍入时间并检查我们是否超过了我们再次 post 之前的间隔。

HTML

<div id="video-wrapper" data-time-last-push="0">

Javascript

将 videojs 容器绑定到 timeupdate 属性。

    var vid = videojs("video-container", {}, function() {
        this.on('timeupdate', videoTracker);
    });

函数 posting ajax...

var videoTracker = function() {
    var player = this;
    var last_push, wrapper, current;
    wrapper = $('#video-wrapper');
    last_push = wrapper.attr("data-time-last-push");
    current = Math.round(player.currentTime());
    //you could make the 5 here to be a variable or your own interval...
    if (current%5 === 0) {
        if (current > last_push) {
            //do your AJAX post here...
            wrapper.attr("data-time-last-push", current);
            console.log('currentTime = ' + player.currentTime());
            console.log(' duration: ' + player.duration());
        }
    }
};

注意，我尝试做一个 jsfiddle 来展示它的工作，但最终运行进入 HTTPS 视频，因为示例视频无法通过安全连接工作。

节流 HTML5 视频当前时间

Throttling HTML5 Video currentTime

html

javascript

ajax

jquery

html5-video

HTML

Javascript

函数 posting ajax...