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でも同じことができると思われる。
関連記事
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...