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

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

您想要为您的视频播放器收听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 ms = new Date()).getTime() - time.getTime();
    totalTime += parseInt(milisec / 1000);
  }
}, 10);

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

希望这可以帮助！