'Function to remember the position where the video was paused in VideoJS

I would like to know how I can add a function to VideoJs that remembers the video pause point using the localStorage method, to store the playback timer, so if the user closes or refreshes the page and returns to the player, the video playback returns in the position where it was previously paused, and a message appears asking if it would like to resume the video or return to where it left off.

I tried to use this plugin, but it is no longer working in the current version of videojs.

Below is the code I'm using in 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


Solution 1:[1]

I went into the same task and here is my solution.

Use event timeupdated to update time, note that timeupdated fires too frequently for the purpose of memorizing progress, we can down-sample the event, at each time the event is fired, we store the current time in localStorage:

NUMBER_OF_COUNT_TO_UPDATE_TIME == 0;
timeUpdateCounter = 1;
player.ready(function () {
  this.on("timeupdate", function (e) {
    timeUpdateCounter++;
    if (timeUpdateCounter % NUMBER_OF_COUNT_TO_UPDATE_TIME == 0) {
      timeUpdateCounter = 1;
      localStorage.setItem('lastUpdated', this.currentTime())
    }
  })
});

And whenever you need to play:

t = localStorage.getItem('lastUpdated')
player.currentTime(t)
player.play()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 beedrill

Related Questions