视频播放器监听开始时间和暂停时间视频播放器，记录片段的开始播放时间和暂停时间。难点在于：正常播放，点击进度条，会之间跳

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://xue.jd.com/misc/js/jquery-1.11.3.min.js"></script>
    <script src="//newbuz.360buyimg.com/video/4.8.4/videoBox.js"></script>
  </head>
  <body>
    <video
      class="video-js"
      id="video-player"
      height="325px"
      width="490px"
    ></video>
    <script>
      // 上一个进度
      var last = 0;
      // 下一个进度
      var current = 0;
      // 片段开始时间
      var startTime = 0;
      // 片段结束时间
      var endTime = 0;

      function callback(player) {
        window.player = player;
        //播放结束 保存播放信息
        player.on("ended", function () {
          endTime = window.player.currentTime();
          console.log("暂停时调用接口");
          console.log("开始" + startTime + "结束时间" + endTime);
        });
        // 看当前用户是否有播放记录,并续播
        queryCoursePlayRecord();
        player.on("playing", function () {
          startTime = window.player.currentTime();
          console.log("开始时间" + startTime);
        });
        player.on("pause", function () {
        // 有的播放器点击进度条的时候，会触发暂停，这个情况不要放在暂停中处理，因为暂停需要 window.player.currentTime(); 点击进度条后获取不到点击进度条之前的播放进度
          if (window.player.seeking()) {
            return;
          }
          // 结束时意外进入playing的过滤
          if (window.player.duration() === window.player.currentTime()) return;
          endTime = window.player.currentTime();
          console.log("暂停时调用接口");
          console.log("开始" + startTime + "结束时间" + endTime);
        });
        player.on("seeking", () => {
          endTime = last;
          console.log("点击进度条调用接口");
          console.log("开始" + startTime + "结束时间" + last);
          startTime = window.player.currentTime();
        });
        player.on("timeupdate", function () {
          last = current;
          current = window.player.currentTime();
        });
      }
      // 监听是否在当前页
      document.addEventListener("visibilitychange", () => {
        if (document.hidden) {
          endTime = window.player.currentTime();
          console.log("暂停时调用接口");
          console.log("开始" + startTime + "结束时间" + endTime);
          // 不需要单独调接口，处理暂停事件就行
          this.player.pause()
        }
      });
    </script>
    <script type="application/javascript">
      videoBox.initPlayer("video-player", {
        //暂时支持这四种格式rtmp,flv,mp4,m3u8，rtmp强制flash播放，根据需要加载视频格式
        src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //播放地址
        controls: true, //是否显示控制条
        preload: "auto", //是否预加载 'auto''metadata''none'
        autoplay: true, //是否自动播放
        loop: false, //是否循环
        mute: false, //是否静音
        fuScrnEnabled: true, //是否允许全屏
        coverpic: "", //封面图
        playbackRateEnabled: true, //是否展示倍速按钮
        callback: callback,
        language: "en",
      });
    </script>
  </body>
</html>