HTML5プレイヤー CSSクラス名

カスケーディングスタイルシート (CSS) でカスタマイズを行うには、Ooyalaと同じクラス名を使用する必要があります。

独自のカスタムプレイヤースタイルを開発する場合、Ooyalaが使用するCSSクラス名と同じものを使用する必要があります。それらクラス名を以下に記載します。

プレイヤーの埋め込み時のスタイルのリンクに関する詳細は、CSSにリンクするをご覧ください。

CSSクラス名

付随的クラス

説明

.oo_promo

  ビデオ再生前のプレビューパネルのスタイル
 

div.oo_start_button

プロモ画面の再生ボタンのスタイルおよび位置

.oo_start_spinner

  プロモ画面の再生ボタンが表示される前に表示されるスピナーのスタイル

.oo_spinner

  再生ボタンがクリックされて、ビデオが開始する前に表示されるスピナーのスタイル

.oo_mini_controls

  「スモール」モードのプレイヤーのスタイル (以下の .oo_full_controls の逆)。これらスタイルでは コントロールを最小化しなければいけません。
 

.oo_scrubber

シークバーのスタイル
 

.oo_scrubber_track

シークバートラックのスタイル
 

.oo_toolbar_item

統一性のためにコントロールボタンに追加しました
 

.oo_currentTime

現在時刻のためのスタイル
 

.oo_timeToLive

ライブモード時の長さカウントのスタイル
 

.oo_duration

VODアセットのための長さカウントのスタイル
 

.oo_playhead

プレイヘッドのスタイル (ビデオ内の位置を表すシークバー上のインジケーター)

.oo_full_controls

  「全画面」モードのプレイヤーのスタイル (上記の .oo_mini_controls の逆)
 

.vod .oo_scrubber

VODアセットのためのシークバーのスタイル
 

.live .oo_scrubber

ライブアセットのためのシークバーのスタイル
 

.vod .oo_scrubber_track

VODアセットのためのシークバートラックのスタイル
 

.oo_currentTime

現在時刻のためのスタイル
 

.oo_timeToLive

ライブモード時の長さカウントのスタイル
 

.oo_duration

VODアセットのための長さカウントのスタイル
 

.oo_toolbar_item

統一性のためにコントロールボタンに追加しました
 

.oo_button_highlight

フィードバックへのハイライトボタンのクリック/タッチ時のスタイル
 

.oo_playhead

プレイヘッドのスタイル (ビデオ内の位置を表すシークバー上のインジケーター)

.oo_controls

  コントロールバーのスタイルと位置
 

.live

 
 

.oo_controls_inner

コントロールバーのスタイルと位置
 

.oo_label

コントロール内のテキストに適用されるスタイル (長さ、時間、など)。 一貫したスタイル用
 

.oo_scrubber

すでに再生済みのシークバートラック部分のスタイル (つまり、プレイヘッドの左側にあたる部分)。
 

.oo_playhead

コントロールボタンの共通スタイル
 

.oo_scrubber_track

 
 

.vod .oo_scrubber_track

 
 

.live .oo_scrubber_track

 
 

.oo_progress

プログレスバーの共通スタイル - 再生済みおよびバッファ済み
 

.oo_buffer_progress

シークバーの「バッファ済み」部分のスタイル
 

.oo_playhead_progress

 
 

.oo_button

 
 

.oo_rewind

巻き戻しボタンのスタイル
 

.oo_play

再生ボタンのスタイル
 

.oo_pause

ポーズボタンのスタイル
 

.oo_fullscreen

全画面ボタンのスタイル
 

.oo_fullscreen_on

全画面モードがオフの場合の全画面ボタンのスタイル (つまり、ボタンがクリック されると全画面モードに変わります)。
 

.oo_fullscreen_off

全画面モードがオンの場合の全画面ボタンのスタイル (つまり、ボタンがクリック されると全画面モードを終了します)。
 

.oo_live_indicator

ライブビデオインジケーターのスタイル
 

.oo_live_message

ライブテキストインジケーターのスタイル

.oo_ads_countdown

  広告再生時に出現する広告メッセージテキストのスタイル

.oo_end_screen

  ビデオ再生終了時に表示される終了画面パネルのスタイル

.oo_replay

  リプレイボタンのスタイル

この記事はお役にたちましたか?