how does the storage solution for the player work?

[kissyfaceDev]

I wanted to store the currentTime using the local storage which can be later used for resuming playback , but the unique string i'm providing to the storage only stores the settings changes , and volume . the current time is also being stored but with a key src and the value currentTime in seconds , when i return to a video it just starts from the beginning causing inconsistency in playback ,
i'm using react

[sameemul-haque]

I also use React, and the following code allows the video to continue from where the user left off. If you're looking to store the playback progress and resume it, you can achieve this by adding storage="video-key" to the MediaPlayer.

import { useRef } from 'react';
import { isYouTubeProvider, MediaPlayer, MediaProvider, Poster, type MediaProviderAdapter } from '@vidstack/react';
import { DefaultVideoLayout, defaultLayoutIcons } from '@vidstack/react/player/layouts/default';
import '@vidstack/react/player/styles/default/theme.css';
import '@vidstack/react/player/styles/default/layouts/audio.css';
import '@vidstack/react/player/styles/default/layouts/video.css';

function VidstackPlayer() {
  const playerRef = useRef(null);

  // example video url and thumbnail
  const videoUrl = 'https://youtu.be/YE7VzlLtp-4';
  const thumbnail = 'https://img.youtube.com/vi/YE7VzlLtp-4/0.jpg';

  // Media Provider Youtube
  function onProviderChange(provider: MediaProviderAdapter | null) {
    if (isYouTubeProvider(provider)) {
      provider.cookies = true;
    }
  }

  return (

    <MediaPlayer
      src={videoUrl}
      onProviderChange={onProviderChange}
      ref={playerRef}
      className='player'
      storage="video-key"
    >
      <MediaProvider />
      <DefaultVideoLayout
        icons={defaultLayoutIcons}
      />
      <Poster
        className="vds-poster"
        src={thumbnail}
      />
    </MediaPlayer>
  );
};

export default VidstackPlayer;

• https://www.vidstack.io/docs/player/getting-started/installation/react?provider=youtube&styling=default-layout
• https://www.vidstack.io/docs/player/core-concepts/loading#local-storage