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>
関連記事
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法
ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...
-
-
Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法
以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...
-
-
Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)
Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...