Question

问题在于获取视频播放的总时间。我正在使用videojs作为JavaScript库。请注意，currentTime（）方法不是我们想要的总播放时间，我们还认为观众将影片搜索到任意播放位置，并且想要获取实际播放的时间。例） 60秒视频 Viewer会先观看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);

希望这会有所帮助！

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

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

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

2 个答案: