Web アプリケーションで WebVideoPlayer™ コントロールを使用することを決定した時に、開発者が直面する最も一般的な問題はアプリケーションのスタイルに応じて Video Player コントロールのルック アンド フィールを作成することです。Ultimate UI for ASP.NET パッケージで使用可能な jQuery コントロールについて、特にまた広義にビデオ プレーヤーのためのスタイリングとテーマ化に関する以下の情報を使用してこれを実行できます。
WebVideoPlayer コントロールは、他の jQuery コントロールと同じように、スタイルに jQuery UI CSS フレームワークを使用します。Ultimate UI for ASP.NET には、「IG テーマ」と呼ばれるカスタムの UI テーマが含まれています。このテーマは、すべてのインフラジスティックス jQuery コントロールおよび標準の jQuery UI ウィジェットにプロフェッショナルの魅力的なデザインを提供します。
IG テーマとベース テーマは、「jQuery/themes」フォルダー内のインストール ディレクトリに配置されます。テーマをアプリケーションに追加するには、「themes」ディレクトリから「ig」および「base」ディレクトリを、jQuery UI テーマまたは CSS に指定された開発者のサイトのディレクトリにコピーします。
注: このドキュメントのこれ以降は、コピーされたテーマの保存先としてディレクトリが「themes」という名前に指定されていることが前提となります。
図 1: 製品インストール時に含まれるテーマ フォルダー
図 2: 保存先のアプリケーションにコピーされたテーマ フォルダー
IG テーマは jQuery UI テーマに通常あるすべてのスタイルを含むカスタム テーマです。このテーマは必要ではないため、異なるテーマで置き換えることができます。IG テーマ以外のテーマを使用する場合、ビデオ プレーヤーには完全なデザインを達成するためにカスタマイズが必要となる追加のスタイリングポイントがいくつかあります。
WebVideoPlayer は標準の jQuery UI テーマのスタイルシートへのリンクが付けられている必要があります。IG テーマの場合、テーマのスタイルシートへの参照をページに含む必要があります。
ASPX の場合:
<link href="<%= Url.Content("~/themes/ig/jquery.ui.custom.css") %>" rel="stylesheet" type="text/css" />
ベース テーマは、jQuery テーマの後に参照されます。WebVideoPlayer コントロールを使用する時、以下のスタイルシートが必要となります。
ASPX の場合:
<link href="<%= Url.Content("~/themes/base/ig.ui.min.css") %>" rel="stylesheet" type="text/css" />
ビデオ プレーヤーによって使用される CSS クラスの完全なリストは以下のとおりです。最初の列に示されたコントロールのプロパティを使用して、個別の要素のクラスを取得および設定できます。