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側で外しておくこと。

: Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...

: Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法

以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...

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

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

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

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...

: vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)

vimeoの動画URL(https://vimeo.com/xxxxx)からサム ...