Question

我目前正在尝试查看已观看和播放了多少视频，并且在某个时刻我想触发一个功能。

我遇到的问题是我不知道如何跟踪观看的内容。例如，如果您观看了30秒并回放了10秒，那么您基本上观看了30秒而不是20秒，currentTime会显示。

＆＃13;

const video = document.getElementById("video");
const set = new Set();
const percent = .8;
let toWatch;

function mediaWatched (curr) {
  alert(`${curr}% of media watched`)
}

function handleMetadata(e) {
  toWatch = Math.ceil(video.duration * percent);
  console.log(toWatch, video.duration);
}

function handleTimeupdate (e) {
  set.add(Math.ceil(video.currentTime));
  let watched = Array.from(set).pop();
  if (set.has(toWatch) && watched === toWatch) {
    video.removeEventListener("timeupdate", handleTimeupdate);
    console.log(watched);
    mediaWatched(
      Math.round(watched / Math.ceil(video.duration) * 100)
    );
  }
}

video.addEventListener("loadedmetadata", handleMetadata);

video.addEventListener("timeupdate", handleTimeupdate);

＆＃13;

<video width="400" height="300" controls="true" poster="" id="video">
    <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4" />
</video>

＆＃13;

如何添加此类行为以触发一项功能，即如果已观看80％且至少已播放过该功能？

非常感谢！

Answer 1

所以你说的是，如果用户曾经打过标记，那么你想要做什么？因此，如果他们曾经通过视频达到80％，那么你想做点什么吗？如果是这种情况，只需检查每个timeupdate，一旦他们点击标记做某事。如果他们曾经过标记并倒带，那就不重要了（如果那不是你想要的那样，那就一定要防止你再做一次。）

如果您要说的是您想要检查用户是否一直在观看视频一段时间，而不是他们观看了多少视频。然后只需使用setInterval来跟踪他们观看的时间。

const timer = setInterval(() => {
  videoWatchedFor += 1;

  if (videoWatchedFor === someTime) {
    //doSomething;
  }

}, 1000);

Answer 2

这是我的做法

  const getPlayedTime = (player) => {
    let totalPlayed = 0;
    let played = player.played;

    for (let i = 0; i < played.length; i++) {
      totalPlayed += played.end(i) - played.start(i);
    }

    return {
      total: totalPlayed,
      percent: (totalPlayed / player.duration) * 100,
    };
  };

player.addEventListener("timeupdate", () => {
    const timeWatched = getPlayedTime(player);
    console.log(timeWatched);
});

保存已播放的视频量

2 个答案: