Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリセットされる。Youtubeとかだとページ更新・遷移しても設定状況はブラウザに保存されており、これをVideo.jsでも同じように実装したい。調べたところ「videojs-persist」プラグインで実装できる模様。以下に対応方法をメモ。

videojs-persist

GitHub

https://github.com/mister-ben/videojs-persist

CDN

CDNで使う場合は以下を記述する。

<script src=" https://cdn.jsdelivr.net/npm/videojs-persist@0.2.0/dist/videojs-persist.min.js"></script>

異なるバージョンを使用したい場合は以下から探す。

https://www.jsdelivr.com/package/npm/videojs-persist

サンプル

https://taitan916.info/sample/Video.js/plugin/videojs-persist/

再生速度及び音量を変更後、F5でリロードしても設定状況が保存されている筈。

利用方法

ソースコード

<div>
    <video id="video" class="video-js"></video>
</div>

<script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">
<script src=" https://cdn.jsdelivr.net/npm/videojs-persist@0.2.0/dist/videojs-persist.min.js"></script>

<script>
const player = videojs('video',{
    autoplay: false, //自動再生
    loop: false, //ループ
    controls: true, //コントローラー表示
    preload: 'auto', //ビデオデータのダウンロードをすぐに開始するかどうか
    playbackRates: [0.5, 1, 1.5, 2], //再生速度
    notSupportedMessage: '動画再生できません', //再生不可の際のメッセージ
    aspectRatio: '16:9',
    controlBar: {
        remainingTimeDisplay: {
            displayNegative: true, //残再生時間を正数で表示
        },
        skipButtons: {
            forward: 5, //〇秒進める
            backward: 5, //〇秒戻す
        }
    },
});
player.src({
    type: 'video/mp4',
    src: '../../test.mp4',
});

//設定状況の保存
player.persist();
</script>