CSSでプレイヤーをカスタマイズする

プレイヤースキンやテーマをカスケーディングスタイルシート (CSS) ファイルやインラインのCSS要素を 使用してカスタマイズすることができます。

HTMLファイル内でCSSスタイルを使用する場合、別ファイルを用意し、リンクさせるほうがより簡単かつ モジュラー化が促進されます。プレイヤーUIをカスタマイズするには、次のアイテムが必要です。1つのファイルにまとめる (myvideopage.html) こともできますが、複数ファイルにするほうが一般的です。
  • HTMLまたはウェブページ (myvideopage.htmlなど)。

  • ウェブページおよびプレイヤーのスタイルを含むCSSファイル (myvideo.cssなど)。

:デフォルトプレイヤーには関連付けられたスタイルのセットがあります。デフォルトプレイヤーに使用されている スタイル構築の例としてご覧いただけます。

プレイヤーUIの要素

CSSを使用して、プレイヤーコントロールの 色やボーダー、サイズ、その他要素を変更することができます。次の表には、一般的なプレイヤーコントロール の一覧です。これらの中にはOoyalaのデフォルトプレイヤーで使用されているものも含まれます。プレイヤー コントロールに使用されている用語は強制するものではなく、デベロッパーが自由に作成することができます。ただし、 Firebugや相当するウェブ開発ツールを使用してOoyalaデモのDOMツリーを調べて、プレイヤーコントロールの名前や スタイル構成を確認するのもよいアイデアです。
プレイヤーコントロール 使用目的:
Play ビデオの再生を開始します。
Pause ビデオを途中で停止します。選択すると、停止していたところからビデオの再生を再開します。
Stop ビデオを停止します。
Replay ビデオの再生が完了した時に、選択すると最初からもう一度再生します。
Autoplay 再生完了時に、自動的にもう一度再生します。
Fullscreen デバイスの画面をすべて占有するようビデオを拡大します。
Scrubber bar ビデオの特定位置へ移動するために、シークバーを進めるまたは戻します。
Share Digg、Stumble Upon、Facebook、Twitter、Eメールといった共有オプションを有効/無効にします。
Embed embedコードを表示し、embedコードをコピーできるようにします。
Info ビデオのタイトルや説明といった情報テキストを表示します。
ターゲットブラウザが対応している限り、以下のような通常のCSSプロパティを使用して、div IDコンテナのスタイル構築ができます。
  • height - divコンテナや画像オーバーレイなどの要素の高さを設定します。

  • width - 要素の横幅を設定します。

  • border - divコンテナやプレイヤーなどの要素の周囲にボーダーを作成します。

  • float -  CSS要素を左右に動かすために使用し、他の要素を周囲に配置できるようにします。

他にも適用できるCSS要素は多くあります。 HTML5 リファレンスの完全版はW3C基準のウェブサイトにてご覧いただけます。またインターネットを通じて   多くの役立つリファレンスがご利用いただけます。より複雑なスタイルを追加するには、CSS3プロパティもご利用いただけます。 特定のブラウザでは、これらプロパティを使用するにあたり、追加のプリフィックスが必要な場合があります。CSS3スタイルを 使用するにあたり、Firefox 4はプリフィックス -moz- を、ChromeとSafariはプリフィックス -webkit- を使用します。該当するスタイルの一例です。
  • opacity - これを使用することで、透過画像を作成したり、CSS要素を透明にすることができます。

  • mask - 不透明度とクリッピング (シェイプ、テキスト、またはパス)を使用して、マスクのパーツを 定義します。

  • gradients - ある色からもう1つの色への滑らかな遷移を作り出します。同じ要素に 対して、複数の色の遷移を適用することができます。

  • transforms - 要素に対して2Dまたは3D効果を適用することができ、要素を回転、拡大縮小、 移動、ゆがめることができます。

  • transitions - FlashアニメーションやJavaScriptコードを使用せずに、あるスタイルから別の スタイルへ変更する時に、効果を追加することができます。

  • animations - 要素をあるスタイルから別のスタイルへと徐々に変化させることができます。このスタイルを 使用して、アニメーション画像、JavaScriptコード、またはFlashアニメーションをCSS3アニメーション要素に    置き換えることができます。

繰り返しますが、これらCSS3スタイルの対応状況は、ターゲットブラウザの対応状況に依存します。お使いの ブラウザがそれぞれのCSSスタイルをサポートしているかどうかを確認していただく必要があります。

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