ドキュメントDynamic Mediaビューアリファレンスガイド

ビデオスクラバ video-scrubber

Last update: Mon Oct 11 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Developer
  • User

ビデオスクラバは、水平方向のスライダコントロールで、現在再生中のビデオ内の任意の時間位置をユーザーが動的に探すことができます。

ビデオの再生中にスクラバーの「ノブ」も移動し、再生中のビデオの現在の時間位置を示します。 ビデオスクラバは、常にコントロールバーの幅全体を取ります。 ビデオスクラバのスキンを適用できます。 CSS で、高さと垂直方向の位置を変更します。

ビデオスクラバの一般的な外観は、以下の CSS クラスセレクターを使用して制御します。

.s7video360viewer .s7videoscrubber
.s7video360viewer .s7videoscrubber .s7videotime
.s7video360viewer .s7videoscrubber .s7knob

ビデオスクラバの CSS プロパティ

トップ
パディングを含む上の境界線からの位置。
下
パディングを含む下の境界線からの位置。
height
ビデオスクラバの高さ。
background-color
ビデオスクラバーの色。

以下の CSS クラスセレクターは、背景、再生および読み込みのインジケーターを追跡します。

.s7video360viewer .s7videoscrubber .s7track
.s7video360viewer .s7videoscrubber .s7trackloaded
.s7video360viewer .s7videoscrubber .s7trackplayed

トラックの CSS プロパティ

height
対応するトラックの高さ。
background-color
対応するトラックのカラー。

以下に示す CSS クラスセレクターで、ノブを制御します。

.s7video360viewer .s7videoscrubber .s7knob

ノブの CSS プロパティ

トップ
ノブの垂直方向のオフセット。
width
ノブの幅。
height
ノブの高さ。
background-image
ノブのアートワーク。
background-position

CSS スプライトを使用する場合の、アートワークスプライト内の位置。

CSS スプライトを参照してください。

以下に示す CSS クラスセレクターで、再生時間の吹き出しを制御します。

.s7video360viewer .s7videoscrubber .s7videotime

再生時間吹き出しの CSS プロパティ

font-family
時間表示テキストに使用するフォントファミリ。
font-size
時間表示テキストに使用するフォントサイズ。
color
時間表示テキストに使用するフォントカラー。
width
吹き出し領域の幅。
height
吹き出し領域の高さ。
パディング
吹き出し領域のパディング。
background-image
バブルのアートワーク。
background-position

CSS スプライトを使用する場合の、アートワークスプライト内の位置。

CSS スプライトを参照してください。

text-align
吹き出し領域でのテキストの整列。

ビデオスクラバのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 — 高さが 10 ピクセルのカスタムのトラックカラーを持つビデオスクラバを含むビデオビューアを設定するには、次のように記述します。また、コントロールバーの上端と左端から 10 ピクセル、左端から 35 ピクセルの位置に配置します。

.s7video360viewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7video360viewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7video360viewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7video360viewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8