Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法
Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプション項目の「controls」を「false」にする形だと再生ボタン等も非表示となり、autoplay属性で再生するかプレイヤーAPIを使う必要がでてくる。できれば簡単にシークバーのみを非表示にしたい。以下に対応方法とサンプルをメモ。
サンプル
https://taitan916.info/sample/Video.js/hide_seekbar/
実装方法
CSSの指定
以下の通りCSSを指定する。
<style>
.vjs-progress-control.vjs-control{
visibility: hidden !important;
}
</style>
「display:none」でも非表示になるが残再生時間や最大化ボタンが左に寄ってしまいデザインが崩れるので「visibility: hidden」とした。
注意点
早送りや再生速度のオプションはJavaScript側で外しておくこと。
所感
以前にYoutube動画で「シークバーでの早送りは防ぎつつ、動画再生終了時にイベントを実行させる」といったようなことをメモしたが、Video.jsでも同じことができると思われる。
関連記事
-
-
Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法
サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...