2017-01-23 11 views
-1

私はちょうど約1週間前にvideo-js(使用しようとしています)を、私のHTML5ビデオプロジェクトのために を使い始めました。ビデオjsのコントロールのレイアウトを変更するには

プレーヤーの下部にデフォルトの のレイアウトが気に入らないことに気をつけるのは時間がかかりませんでした。

具体的には、私はPlayProgressBarが音量コントロールを明らかにするために、 そのものを自動的に短くしてしまうのが好きではありません。 (私の意見では、 のDEFAULTのための悪い選択)。

上記のPlayProgressBarを持つレイアウトは、 とその下にあるControlBarです。ここに示されているように: https://docs.brightcove.com/en/perform/brightcove-player/guides/customize-appearance.html#BCLreferences

それはとても背が高くはなかったように、[現在のための選択、トリッキー・ツー・動作デフォルトのControlbarはかもしれないが、それはほとんどの時間を引っ込めされているので、その 高さではありません本当に問題です。]

また、マイナス値の「remainingTimeDisplay」を持たない方が好きであり、そこに示されているように、「currentTimeDisplay」、「timeDivider」、「durationDisplay」がかなりあります。

注:スタイル/色をデフォルトから変更する必要はないので、 に関連するCSSが必要ではありません。今私が探しているのは、 レイアウトのジオメトリ変更を達成することだけです。

ビデオタグのdata-setupパラメータを使用して、コントロールバーからいくつかの項目を追加/削除しようとしましたが、 を使用して機能させることができませんでした。

しかし、レイアウトジオメトリを変更するのに最適な(唯一の)場所は、最初のjavascriptで になると思います。 (レイアウト形状は、データ・セットアップパラメータで を制御することができる場合でも、その旨をお知らせください。)

ので、 にいくつかの簡単な開始のjavascriptを提供することができ、ビデオ-jsファイルに堪能である者聴いた人は、そこにありますそのようなレイアウトを達成する?

答えて

0

ああ... JavaScriptはまったく必要ありません。

わずか数行のCSSです。

ので、ヘッダに、ビデオ-jsのためのCSSを含んリンクの下に、追加します。

<style> 
    .video-js .vjs-current-time { display: block; } 
    .video-js .vjs-time-divider { display: block; } 
    .video-js .vjs-duration { display: block; } 
</style> 

参照:https://github.com/videojs/video.js/issues/2507

関連する問題