отслеживать время воспроизведения видео на веб-странице - PullRequest
Новая
       45

отслеживать время воспроизведения видео на веб-странице

0 голосов
/ 26 февраля 2019

Проблема в том, чтобы получить общее время воспроизведения видео.Я использую videojs в качестве библиотеки JavaScript.В качестве предупреждения, метод currentTime () - это не то, что нам нужно, так как общее время воспроизведения, мы также считаем, что зритель ищет фильм в произвольной позиции воспроизведения и хочет получить фактически воспроизведенное время.пример) 60-секундная программа просмотра видео просматривает первые 5 секунд, затем переходит к точке 10 секунд и просматривает следующие 5 секунд.Текущее время составляет 15 секунд, но я надеюсь, что общее время просмотра составляет 10 секунд.

Фактически, каждый раз, когда зритель проигрывает 10%, вызывайте API.Как я могу реализовать JavaScript?

edit) Для чтения видео может потребоваться много времени, поэтому трудно использовать 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) + ' %');
});

1 Ответ

0 голосов
/ 26 февраля 2019

Вы хотите прослушать события 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);

Надеюсь, это поможет!

...