ビデオプレーヤー

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

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

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

.s7mixedmediaviewer .s7videoplayer

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

background-color

ビデオプレーヤーの背景色。

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

例 — ビデオプレーヤーを透明にするには、次のように記述します。

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

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

.s7mixedmediaviewer .s7videoplayer .s7caption

キャプションのCSSプロパティ

CSSプロパティ

説明

background-color

キャプションのテキストの背景。

color

キャプションのテキストカラー。

font-weight

フォントの太さ。

font-size

フォントサイズ

font-family

フォントファミリ。

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

.s7mixedmediaviewer .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クラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7videoplayer .s7waiticon

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

CSSプロパティ

説明

width

アニメーションアイコンの幅。

height

アニメーションアイコンの高さ

margin-left

アニメーションアイコンの左余白。通常は、アイコンの幅の半分を引いた値。

margin-top

アニメーションアイコンの上余白(通常はアイコンの高さの半分を引いた値)。

background-image

ノブのアートワーク。

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

.s7mixedmediaviewer .s7videoplayer .s7waiticon { 
 width: 101px; 
 height: 29px; 
 margin-left: -50px; 
 margin-top: -15px; 
 background-image: url(images/sdk/busyicon.gif); 
}

このページ