首页 > 解决方案 > 记住视频在 VideoJS 中暂停的位置的功能

问题描述

我想知道如何向 VideoJs 添加一个使用 localStorage 方法记住视频暂停点的函数,以存储播放计时器,因此如果用户关闭或刷新页面并返回播放器,则视频播放返回之前暂停的位置,并出现一条消息,询问它是要恢复视频还是返回到停止的位置。

我尝试使用这个插件,但它不再在当前版本的 videojs 中工作。

下面是我在 VideoJS 中使用的代码

<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>
<!-- https://github.com/video-dev/hls.js -->

<script src="./players/src/videojs5-hlsjs-source-handler.min.js?v=0.3.1"></script>
<!-- https://github.com/streamroot/videojs-hlsjs-plugin -->

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

        });

    });
})(jQuery);
</script>

标签: video.js

解决方案


推荐阅读