HOME > JavaScript > Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法

Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法

Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプション項目の「controls」を「false」にする形だと再生ボタン等も非表示となり、autoplay属性で再生するかプレイヤーAPIを使う必要がでてくる。できれば簡単にシークバーのみを非表示にしたい。以下に対応方法とサンプルをメモ。

サンプル

以下の通りCSSを指定する。

<style>
.vjs-progress-control.vjs-control{
    visibility: hidden !important;
}
</style>

「display:none」でも非表示になるが残再生時間や最大化ボタンが左に寄ってしまいデザインが崩れるので「visibility: hidden」とした。

早送りや再生速度のオプションはJavaScript側で外しておくこと。

: VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

: videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

: ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...

: JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...

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

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...