ビデオプレーヤー

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

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

以下に示す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-重み付け

クローズドキャプションのフォント重み付け。

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); 
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now