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でも同じことができると思われる。
関連記事
-
-
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...
-
-
YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法
YouTube埋め込み動画が再生終了した際に、あらかじめ登録してあるJavaSc ...
-
-
Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...
-
-
ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法
ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...
-
-
Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法
以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...