ビデオプレーヤー video-player

ビデオプレーヤーは、ビューア内でビデオコンテンツが表示される長方形の領域です。

再生中のビデオのサイズがビデオプレーヤーのサイズと一致しない場合、ビデオコンテンツはビデオプレーヤーの長方形の表示領域内に中央揃えになります。

以下に示す CSS クラスセレクターで、ビデオプレーヤーの外観を制御します。

.s7videoviewer .s7videoplayer

ビデオプレーヤーの CSS プロパティ

background-color
メインビューの背景色。

システムでビデオを再生できない場合に表示されるエラーメッセージをローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。

例 — サイズが 512 x 288 ピクセルのビデオプレーヤーを持つビデオビューアを設定するには、次のように記述します。

.s7videoviewer .s7videoplayer{
background-color: transparent;
}

クローズドキャプションは、ビデオプレーヤー内の内部コンテナに配置されます。 そのコンテナの位置は、サポートされている WebVTT の位置決め演算子で制御します。 キャプションテキスト自体はコンテナ内にあり、そのスタイルは以下の CSS クラスセレクターを使用して制御します。

. s7videoviewer .s7 videoplayer .s7caption

クローズドキャプションの CSS プロパティ

background-color
クローズドキャプションのテキストの背景。
color
クローズドキャプションのテキストの色。
font-weight
クローズドキャプションのフォントの太さ。
font-size
クローズドキャプションのフォントサイズ。
font-family
クローズドキャプションのフォント。

例 — 14 ピクセル、ライトグレー、Arial®の、半透明の黒い背景にクローズドキャプションのテキストを設定するには、次のように記述します。

.s7videoviewer .s7videoplayer .s7caption {
 background-color: rgba(0,0,0,0.75);
 color: #e6e6e6;
 font-weight: normal;
 font-size: 14px;
 font-family: Arial,Helvetica,sans-serif;
}

バッファリングアニメーションの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7videoviewer .s7videoplayer .s7waiticon

待機アイコンの CSS プロパティ

CSS プロパティ
説明
width
アニメーションアイコンの幅。
height
アニメーションアイコンの高さ。
margin-left
アニメーションアイコンの左余白(通常はアイコンの幅の半分を引いたもの)。
margin-top
アニメーションアイコンの上余白(通常はアイコンの高さの半分を引いた値)。
background-image
ノブのアートワーク。

例 — 幅が 101 ピクセル、高さが 29 ピクセルのバッファリングアニメーションを設定するには、次のように記述します。

.s7videoviewer .s7videoplayer .s7waiticon {
 width: 101px;
 height: 29px;
 margin-left: -50px;
 margin-top: -15px;
 background-image: url(images/sdk/busyicon.gif);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8