Question

我正在使用video.js（http://www.videojs.com/）来构建视频审批系统，并需要在播放器中记录用户操作。我可以通过播放，暂停，结束等方式轻松完成此操作，但在尝试记录搜索时遇到问题。

我希望能够在平台中记录任何搜索的开始和结束时间，因此我们知道用户是否实际上没有观看视频的某个部分。玩家似乎提供支持此事件的事件，但我很难从中获得正确的时间。

当用户浏览视频时，播放器按顺序发出以下事件：暂停，搜索，搜索，播放。

如果我使用currentTime（）在任何这些事件中查询播放器对象，结果始终是搜索的结束时间，即使在初始暂停事件中也是如此。这意味着我可以记录搜索结束的位置，但不能记录它的起始位置。

任何人都可以帮我找到搜索开始的视频中的位置吗？

如果无法做到这一点，我会决定在播放期间禁用搜索方式。

编辑：按要求添加代码。这非常简单：

var trackedPlayer = videojs('pvp-player');

trackedPlayer.on("play", function (e) {
    console.log("Video playback started: " + trackedPlayer.currentTime());
});

trackedPlayer.on("pause", function (e) {
    console.log("Video playback paused: " + trackedPlayer.currentTime());
});

trackedPlayer.on("seeking", function (e) {
    console.log("Video seeking: " + trackedPlayer.currentTime());
});


trackedPlayer.on("seeked", function (e) {
    console.log("Video seek ended: " + trackedPlayer.currentTime());
});

trackedPlayer.on("ended", function (e) {
    console.log("Video playback ended.");
});

如果我能得到我想要的所有跟踪，我将用ajax调用替换console.log以存储数据。

Answer 1

您可以在调用timeupdate作为来源之前收听seeking并获取您到达的最后一个值：

var previousTime = 0;
var currentTime = 0;
trackedPlayer.on('timeupdate', function() {
    previousTime = currentTime;
    currentTime = trackedPlayer.currentTime();
});
trackedPlayer.on('seeking', function() {
    console.log('seeking from', previousTime, 'to', currentTime, '; delta:', currentTime - previousTime);
});

这似乎适用于HTML5技术。我还没有和其他技术人员一起测试过。

然而，有一个小问题：第一次寻找暂停的播放器只产生一个小的delta（两个变量的前一个值几乎相同）。但这并不重要，因为delta只有几百毫秒（而且我认为你只对“from”值感兴趣）。

<强>更新

seeked的触发频率远低于seeking。请尝试以下方法。

var previousTime = 0;
var currentTime = 0;
var seekStart = null;
trackedPlayer.on('timeupdate', function() {
    previousTime = currentTime;
    currentTime = trackedPlayer.currentTime();
});
trackedPlayer.on('seeking', function() {
    if(seekStart === null) {
        seekStart = previousTime;
    }
});
trackedPlayer.on('seeked', function() {
    console.log('seeked from', seekStart, 'to', currentTime, '; delta:', currentTime - previousTime);
    seekStart = null;
});

还有许多用于去除函数调用的库（在这种情况下是对后端的调用）。

Answer 2

我需要为我正在处理的项目找到相同的值，以便我可以确定用户是否在videojs播放器中向前或向后跳过。

最初，我想保存用户在 timeupdate 上寻找的currentTime（），然后在寻求后立即删除我的timeupdate听众出动。虽然这在Chrome等浏览器中有效，但不幸的是，我发现其他浏览器继续更频繁地启动timeupdate并且会继续更新当前时间（）我在播放器实际搜索后保存。（/ p>

这是最终适用于Safari / Chrome / Firefox的解决方案。我还没有在IE中测试。

Answer 3

我知道这是一个老帖子，但这是唯一对我有用的解决方案。

var counter = 0;
var beforeTimeChange = 0;

function handleSeeking() {
  var timeoutTime = 300;
  var beforeCounter = counter + 1;
  if (trackedPlayer.cache_.currentTime === trackedPlayer.duration()) {
    return;
    // when video starts over, calls seek
  }
  beforeTimeChange = beforeTimeChange || trackedPlayer.cache_.currentTime;
  setTimeout(function() {
    if (beforeCounter === counter) {
        console.log('before seek', beforeTimeChange, '\nafter seek', trackedPlayer.currentTime() - (timeoutTime / 1000));
        counter = 0;
        beforeTimeChange = 0;
    }
  }, timeoutTime);
  counter++;
}

trackedPlayer.on('seeking', handleSeeking);

Answer 4

为获得更准确的解决方案，您可以收听触发搜索的事件，例如在进度栏上按下鼠标，向左键，向右键等，并从这些事件中获取当前时间。例如，在7.10.2版中，您可以执行以下操作，

let seekStartTime;

player.controlBar.progressControl.on('mousedown', () => seekStartTime = player.currentTime());
player.controlBar.progressControl.seekBar.on('mousedown', () => seekStartTime = player.currentTime());
player.on('keydown', (e) => {
    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
         seekStartTime = player.currentTime();
    }
});

console.log(seekStartTime);

注1：：有两个单独的mousedown事件侦听器，用于进度控制和搜索栏。这是因为也可以通过在进度控件上的搜索栏外部单击来搜索视频。

注释2：使用热键编号进行搜索不会暂停视频。但是，如果需要，您也可以添加这些keydown侦听器。

Answer 5

尝试使用此代码了解视频的长度。

var duration = document.getElementById("duration");
var vid_duration = Math.round(document.getElementById("video").duration);
    //alert(vid_duration);
duration.innerHTML = vid_duration;
    //duration.firstChild.nodeValue = vid_duration;

video.js - 在播放期间查找搜索的开始时间

5 个答案: