Ignite UI for jQuery™ ビデオ プレーヤー、つまり igVideoPlayer
は HTML 5 ビデオ プレーヤーで、堅牢なクロスブラウザー ユーザー インターフェイスにより Web ページ上のビデオを描画します。ビデオ プレーヤーは HTML 5 ビデオ タグと jQuery UI フレームワークを使用してビルドされており、ブラウザーのプラグインをインストールして使用しなくても、高速ロードが可能な豊富なマルチメディア エクスペリエンスを実現します。
ビデオ プレーヤーを使用する場合、さまざまな実装オプションから選択できます。このビデオ プレーヤーは、特定のサーバー バックエンドを使用せずに構成できる豊富な jQuery API を公開しています。また、Microsoft® ASP.NET MVC フレームワークを使用する開発者は、ビデオ プレーヤーのサーバー側ヘルパーを利用して、好みの .NET 言語を使ってコントロールを構成できます。
igVideoPlayer
をスタイル設定することによって、すべての対応ブラウザーに一貫性のある外観を提供できます。ビデオ プレーヤーは、既存のスタイル シートを活用でき、さらに jQuery UI の ThemeRoller を使用してスタイル設定することもできます。
図 1: igVideoPlayer とプレーヤー コントロール
次のステップは、jQuery クライアント コードまたは ASP.NET MVC サーバー コードのいずれかを使用して、Web ページにビデオ プレーヤーの基本的な実装を作成する方法を示します。
注: どの実装を選択するかについて詳細は、「Ignite UI for jQuery の概要」を参照してください。
図 2: ビデオ プレーヤーの初回ビューを示す igVideoPlayer
ご自分の HTML ページまたは ASP.NET MVC View で、必要な JavaScript ファイル、CSS ファイル、および ASP.NET MVC アセンブリを参照してください。
リスト 1: igVideoPlayer の CSS および JavaScript 参照
HTML の場合:
<link type="text/css" href="/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/structure/infragistics.css" rel="stylesheet" />
<script src="scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.core.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.lob.js"></script>
リスト 2: ASPX ASP.NET MVC View における igVideoPlayer の CSS および JavaScript 参照
ASPX の場合:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head runat="server">
<link href="<%= Url.Content("~/css/themes/infragistics/infragistics.theme.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("~/css/structure/infragistics.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/scripts/jquery-1.4.4.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/scripts/jquery-ui.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/scripts/infragistics.core.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/scripts/infragistics.lob.js") %>" type="text/javascript"></script>
リスト 3: Razor ASP.NET MVC View における igVideoPlayer の CSS および JavaScript 参照
Razor の場合:
@using Infragistics.Web.Mvc;
<!DOCTYPE html>
<html>
<head>
<link href="@Url.Content("~/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/structure/infragistics.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/infragistics.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/infragistics.lob.js")" type="text/javascript"></script>
jQuery の実装では、HTML 内のターゲット要素として div または video を定義します。ASP.NET MVC の実装の場合、含める要素を Ignite UI for MVC が作成してくれるので、この手順はオプションです。
リスト 4: igVideoPlayer で使用するために定義されたベース DIV 要素
HTML の場合:
<div id=”videoPlayer” ></div>
上記のセットアップが完了したら、ID、Height、Width、Title などのオプションを設定します。Height および Width オプションは、整数、ピクセル、またはパーセント幅として設定できる文字列です。
注: ASP.NET MVC View では、その他のオプションをすべて設定した後で Render メソッドを呼び出す必要があります。
リスト 5: igVideoPlayer の jQuery でのインスタンス化
JavaScript の場合:
<script type="text/javascript">
$(window).load(function () {
$('#videoPlayer').igVideoPlayer({
height: '300px',
width: '400px',
title: 'Video Sample'
});
});
</script>
リスト 6: igVideoPlayer の ASPX ASP.NET MVC View でのインスタンス化
ASPX の場合:
<%= Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Title("Video Sample")
.Render() %>
リスト 7: igVideoPlayer の Razor ASP.NET MVC View でのインスタンス化
Razor の場合:
@(
Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Title("Video Sample")
.Render()
)
ブラウザー間の互換性については、多くのサイトでビデオごとに異なるフォーマットをホストする必要があります。HTML 5 ビデオおよびブラウザー サポートの詳細は、「igVideoPlayer による HTML5 ビデオの処理」ヘルプ トピックをご覧ください。ソース オプションをビデオ ソースのリストに設定します。
リスト 8: ビデオ ソースの jQuery への設定
JavaScript の場合:
$('#videoPlayer').igVideoPlayer({
height: '300px',
width: '400px',
title: 'Sample',
sources: ['http://www.yourdomainhere.com/videos/sample.mp4',
'http://www.yourdomainhere.com/videos/sample.webm',
'http://www.yourdomainhere.com/videos/sample.ogv']
});
リスト 9: ビデオ ソースの ASPX ASP.NET MVC View への設定
HTML の場合:
<%= Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Sources(ViewData["videoSources"] as List<String>)
.Render() %>
リスト 10: ビデオ ソースの Razor ASP.NET MVC View への設定
Razor の場合:
@(
Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Title("Video Sample")
.Sources(ViewData["videoSources"] as List<String)
.Render()
)
リスト 11: ビデオ ソースを ASP.NET MVC の Controller に設定して View で使用する
C# の場合:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["videoSources"] = new List<String> {
"http://yourdomainhere.com/videos/sample.mp4",
"http://yourdomainhere.com/videos/sample.webm",
"http://yourdomainhere.com/videos/sample.ogv" };
return View();
}
}
Visual Basic の場合:
Public Class HomeController
Inherits Controller
Public Function Index() As ActionResult
ViewData("videoSources") = New List(Of [String])() From { _
"http:// yourdomainhere.com/videos/sample.mp4", _
"http:// yourdomainhere.com/videos/sample.webm ", _
"http:// yourdomainhere.com/videos/sample.ogv" _
}
Return View()
End Function
End Class
最後に、HTML 5 に準拠したブラウザーで Web ページを実行すると、ビデオ プレーヤーは選択したビデオをロードします。
オンラインで表示: GitHub