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

Question

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

事实上，观众每次播放 10%，调用 API。我如何实施 JavaScript?

编辑）看视频可能会比较费时间，所以很难用new Date()。比如5秒的视频可能因为网速问题需要10秒。我正在考虑以下代码。只要看到console，大部分情况下都很好，但是当你跳过播放位置的时候，在极少数情况下播放速率的测量会出现错误。

<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 milisec = new Date()).getTime() - time.getTime();
    totalTime += parseInt(milisec / 1000);
  }
}, 10);

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

希望对您有所帮助！

Answer 2

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

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);
}

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

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

track the time the video was playing in the web page

javascript

video

video.js