javascript - 限制 HTML5 视频 currentTime

Question

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

我遇到的问题是，视频每隔约 300MS 播放一次 API 报告，而我不想那么频繁地使用我的 API。所以我需要一个解决方案来跟踪我上次发帖的时间。经过一番研究后，我找不到答案，所以如果其他人有类似的需求，我对此问题的解决方案如下。

Answer 1

我们决定每 5 秒发布一次视频观看结果，但由于我们无法保证 currentTime 会在 5 秒后准确报告，因此我们只需四舍五入到最接近的整数值即可。

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

HTML

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

Javascript

将 videojs 容器绑定(bind)到 timeupdate 属性。

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

发布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 视频，因为示例视频无法通过安全连接工作。