如何在VideoJS中实现基于localStorage的暂停位置记忆及续播提示功能

实现逻辑 #

• 监听播放器timeupdate播放时间更新事件，节流后将有效播放进度存入localStorage
• 播放器元数据加载完成后读取本地存储的进度，校验有效性后弹出提示询问用户是否跳转至上次播放位置
• 视频播放完成后自动清除存储的进度，避免后续进入重复触发提示

可直接使用的修改后代码 #

<link href="./players/src/video-js.min.css" rel="stylesheet">

<!-- libjass-->
<link href="./players/src/libjass.css" rel="stylesheet">
<script src="./players/src/libjass.js"></script>

<!-- src -->
<link href="./players/src/videojs.ass.css" rel="stylesheet">
<script src="./players/src/videojs.ass.js"></script>

<!-- modo resolution switcher -->
<link href="./players/src/videojs-resolution-switcher.css" rel="stylesheet">
<script src="./players/src/videojs-resolution-switcher.js"></script>

<!-- modo seek-buttons -->
<link rel="stylesheet" href="./players/src/videojs-seek-buttons.css">
<script src="./players/src/videojs-seek-buttons.min.js"></script>

<!-- modulo jquaery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- modo videoJS m3u8 -->

<script src="./players/src/hls.min.js?v=v0.9.1"></script>
<script src="./players/src/videojs5-hlsjs-source-handler.min.js?v=0.3.1"></script>
<script src="./players/src/vjs-quality-picker.js?v=v0.0.2"></script>


<video id="player" class="embed-responsive-item video-js vjs-default-skin vjs-big-play-centered" poster="url imagem"></video>

<script type="text/javascript">
videojs('player', {
    controls: true,
    nativeControlsForTouch: false,
    fluid: true,
    width: 1920,
    height: 1080,
    plugins: {
      seekButtons: {
        'back': 10,
        'forward': 10,
    },
    },
  }
);

var vjs = videojs('player');
//  inicializa o plugin de ass
var vjs_ass = vjs.ass({
  'src': ["url ass"],
  label: "ptbr",
  'delay': -0.1,
  // enableSvg: false
});

(function ($) {
    $(document).ready(function () {
         // Modulo de seleção de resolução hls
        videojs('player').ready(function () {
            var myPlayer = this;
            myPlayer.qualityPickerPlugin();
            myPlayer.src({type: 'application/x-mpegURL', src: 'url m3u8'});

            // ========== 新增播放进度记忆功能开始 ==========
            // 本地存储key，多视频场景可拼接视频唯一ID区分
            const STORAGE_KEY = 'video_last_play_position';
            // 存储定时器，避免频繁操作本地存储
            let saveTimer = null;

            // 格式化时间为 分:秒 格式，用于提示文案
            function formatTime(seconds) {
              const min = Math.floor(seconds / 60);
              const sec = Math.floor(seconds % 60);
              return `${min}:${sec.toString().padStart(2, '0')}`;
            }

            // 监听播放时间更新，节流3秒存储一次进度
            myPlayer.on('timeupdate', () => {
              clearTimeout(saveTimer);
              saveTimer = setTimeout(() => {
                const currentTime = myPlayer.currentTime();
                const duration = myPlayer.duration();
                // 仅存储大于1秒且未播放完成的有效进度
                if (currentTime > 1 && duration && currentTime < duration - 1) {
                  localStorage.setItem(STORAGE_KEY, currentTime);
                }
              }, 3000);
            });

            // 视频播放完成后清除存储的进度
            myPlayer.on('ended', () => {
              localStorage.removeItem(STORAGE_KEY);
            });

            // 播放器加载完成后检查是否有历史播放进度
            myPlayer.on('loadedmetadata', () => {
              const lastPosition = parseFloat(localStorage.getItem(STORAGE_KEY));
              const duration = myPlayer.duration();
              // 进度有效则弹出提示
              if (!isNaN(lastPosition) && lastPosition > 1 && lastPosition < duration - 1) {
                const needResume = confirm(`检测到上次播放到${formatTime(lastPosition)}，是否从该位置继续播放？`);
                if (needResume) {
                  myPlayer.currentTime(lastPosition);
                  myPlayer.play();
                } else {
                  // 选择不继续则清除历史进度
                  localStorage.removeItem(STORAGE_KEY);
                }
              }
            });
            // ========== 新增播放进度记忆功能结束 ==========
        });
    });
})(jQuery);
</script>

适配说明 #

如果页面存在多个不同视频，只需修改STORAGE_KEY的取值，拼接对应视频的唯一ID即可区分不同视频的播放进度。提示框样式可根据业务需求替换为自定义弹窗替代原生confirm。

内容的提问来源于stack exchange，提问作者Luciebr