跟踪视频在网页中播放的时间

Question

问题是获取视频播放的总时间。 我正在使用 videojs 作为 JavaScript 库。 需要注意的是，currentTime() 方法不是我们想要的总播放时间，我们还考虑到观众将电影寻找到任意播放位置，并希望获取实际播放的时间。 例子） 60秒视频 观看者先观看 5 秒，然后跳转到 10 秒点并观看接下来的 5 秒。 当前时间是 15 秒点，但我希望总观看时间是 10 秒。

实际上，每次观看者播放 10% 时，都会调用 API。 如何实现 JavaScript？

编辑） 看视频可能比较费时间，所以很难用new Date()。 例如，由于网络速度问题，5 秒视频可能需要 10 秒。 我正在考虑以下代码。 只要你看到控制台，大多数情况下都可以正常工作，但是当你跳过播放位置时，在极少数情况下播放速率的测量会出现错误。

<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<video id="myPlayer" class="video-js"
    controls preload="auto" width="440" height="264"
    poster="http://vjs.zencdn.net/v/oceans.png">
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>

const player = videojs('myPlayer');
const trackingPoint = 10;
let totalTime = 0;
let tempTotalTime = 0;
let startTime = 0;

player.on('pause', function () {
  totalTime += tempTotalTime;
});

player.on('play', function () {
  startTime = player.currentTime();
});

player.on('timeupdate', function () {
  if (player.paused()) {
    return;
  }
  let currentTime = player.currentTime();
  tempTotalTime = currentTime - startTime;
  let tmptotalTime = totalTime + tempTotalTime;
  let playbackRate = tmptotalTime / player.duration() * 100;
  console.log(Math.floor(playbackRate) + ' %');
});

Answer 1

这段代码很好，但你不需要日期，间隔本身就像计时器一样。

let timer = null,
totalTime = 0;

player.on("play", startPlaying);
player.on("pause", pausePlaying);

function startPlaying() {
    console.log('played');
  timer = window.setInterval(function() {
    totalTime += 1;
  }, 1000);
}

function pausePlaying() {
    console.log('stopped');
  if (timer) clearInterval(timer);
}

将返回以秒为单位观看视频的时间，如果您需要更准确的结果，例如毫秒，您可以设置更短的时间间隔（将 1000 更改为 1，以便每隔毫秒调用一次函数) 但我认为这种方法不适用于此类用例，因为您需要它非常准确，因为这不会考虑加载时间，加载时间几乎可以保证超过一秒。

Answer 2

您希望为您的视频播放器收听play 和pause 事件。 对于前者，您将启动一个增量函数，该函数基本上会增加视频播放的总时间，而暂停会清除它。

这就是我的做法。

let timer = null,
    totalTime = 0;

let time = new Date();

player.addEventListener("play", startPlaying);
player.addEventListener("pause", pausePlaying);

function startPlaying() {
  timer = window.setInterval(function() {
    totalTime += new Date().getTime() - time.getTime()
  }, 10);
}

function pausePlaying() {
  if (timer) clearInterval(timer);
}

另一种选择：

let isPaused = true;
let time = new Date();
let totalTime = 0;
let t = window.setInterval(function() {
  if(!isPaused) {
    let milisec = new Date()).getTime() - time.getTime();
    totalTime += parseInt(milisec / 1000);
  }
}, 10);

player.addEventListener("play", () => isPaused = false);
player.addEventListener("pause", () => isPaused = true);

希望这会有所帮助！