SilverlightならWeb上で高精細な動画再生も簡単？：.NETを知らない人でも分かるSilverlight入門（2）（1/3 ページ）
編集部注：Silverlightそのものについて詳しく知りたい読者は、本稿と併せて特集「Silverlightは次世代のJavaScriptフレームワーク？」もご参照ください。
GyaOも採用、高精細動画の再生機能を体験せよ
前回では、Silverlightアプリケーション開発のための基礎知識を解説しました。第2回となる今回はいよいよ、【1】Silverlightの注目技術の1つであるメディア（動画や音楽）の使用方法と【2】Silverlightで扱うことのできるイベント、そして【3】業務アプリケーションには欠かせないエラーハンドリングの3つに焦点を当てて解説します。
特に【1】については、2007年11月に動画配信サービスのGyaOがSilverlightの技術を使って高精細（HD）な動画の配信を開始したとのニュースがあって話題になりました（参考「GyaOがMS「Silverlight」採用――Flash Video落選のわけは？〜映画予告を動画配信〜」）。今回はその仕組みを解剖します。
■ どれくらい高精細な動画がWeb上で再生できるのか？ 体験してみよう
どれぐらい高精細な動画がWeb上で再生可能なのかは実際に見ていただいたほうが早いでしょう。下のサンプルを動かしてみてください。
| Silverlight Streamingを使った動画を再生するSilverlightアプリケーション（もっと大きな画面で見たい場合はこちら）※この動画の著作権はマイクロソフト社にありますが、今回特別に許諾を得て使用しています。※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ |
いかがでしょうか？ Silverlight Streaming（マイクロソフト社提供のストリーミング・サービス）では20Mbytesぐらいの動画までしかホスティングできませんが、Silverlightではさらに容量の大きい高精細なものも再生可能です。さらに高精細な動画でSilverlightの機能を試してみたい読者は、これから紹介するサンプルを読者のサーバ環境で使ってみてください。
■ 連載ごとに成長するSilverlightサンプル・アプリケーション
さて、今回からその回に扱った技術を毎回組み合わせていき、最終的に1つのアプリケーションを作成します（このアプリケーションは、Silverlight 1.0と2.0（※1）でそれぞれ別のアプリケーションとなります）。成長するアプリケーションということで、そのまま「グローアップ（Grow up）・アプリケーション」と名付けました。
図1 今回のグローアップ・アプリケーション（「Play」で再生、「Pause」で一時停止、「Stop」で停止、「FullScreen」でアプリケーションが画面いっぱいに広がる）今後の連載では、特に明示しない限り、サンプルはすべてグローアップ・アプリケーションとなります。それでは、Silverlightアプリケーションの各機能説明の第1弾である「メディアとイベント」を解説していきましょう。今回のサンプルコードは最後にダウンロードできます。
※1：連載第1回で「Silverlight 1.1」と呼ばれていたバージョンが、新たに「Silverlight 2.0」と名称変更となっております（参考「MSのSilverlight、次のバージョンアップで2.0に」）。それに伴い、以後の連載ではSilverlight 2.0で通していきます。
手軽に動画配信？−MediaElementオブジェクト
最初はSilverlightの一番の特徴ともいえるメディアの取り扱いについて解説していきます。Silverlightではメディアを扱う際に、MediaElementオブジェクトを使用します。以下のソースはMediaElementオブジェクトの使用例になります（「Silverlight.wmv」の部分は動画のURL／ファイル名になります。読者の環境に応じて適宜変えてください）。
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480" Background="White" x:Name="Page">
<MediaElement Width="640" Height="480"
Source="Silverlight.wmv" AutoPlay="true"/>
</Canvas>
動画を再生するだけであれば、これで完成です。後は、アプリケーションを実行すれば自動で再生されます。しかし、実際のアプリケーションでは、これだけで終了というわけにはいかないと思います。
■ MediaElementオブジェクトの主なプロパティ
MediaElementオブジェクトには多くのプロパティやイベントがあるので、それらを設定することで柔軟にメディアを扱うことができます。以下の表1では、MediaElementオブジェクトで使用する主なプロパティを列挙しました。
| プロパティ | 詳細 | デフォルト値 | |
|---|---|---|---|
| AutoPlay | Sourceプロパティに設定されたときに、自動でメディアを再生するかを設定 | true | |
| Balance | 左右のスピーカーのボリュームの比率を取得または設定。値の範囲は−1〜1 | 0 | |
| BufferingProgress | バッファリングの進行状況の割合を示す値を取得。値の範囲は0〜1 | 0 | |
| BufferingTime | タイムラインの時間を取得または設定 | 5秒（0:0:05） | |
| CurrentState | MediaElementオブジェクトの状態（Buffering、Closed、Error、Opening、Paused、Playing、Stopped）を取得 | Closed | |
| DownloadProgress | リモートサーバからダウンロードが完了するまでの時間を取得。値の範囲は0〜1 | false | |
| IsMuted | オーディオがミュートされているかどうかを示す値を取得または設定 | なし | |
| Markers | 現在ロードされているメディアファイルに関連した（TimelineMarkerオブジェクトとして表される）タイムラインマーカーのコレクションを取得 | 空のコレクション | |
| NaturalDuration | メディアの自然な継続時間を取得。このプロパティは、MediaOpenedイベントが発生するまで正確ではない | Automatic | |
| Position | メディアの再生の経過時間を示す現在の位置を取得または設定 | 00:00:00 | |
| Source | メディアのソースを取得または設定 | null | |
| Volume | メディアのボリュームを取得または設定。値の範囲は0〜1 | 0.5 | |
■ MediaElementオブジェクトの使用例にイベントを追加
MediaElementオブジェクトもイベントを持っていますが、一番多く使われるであろうイベントはメディアの再生（Play）・停止（Stop）・一時停止（Pause）になると思います。そのため、ここではイベントの例として、先の使用例にこれらのイベントを追加したものを例として挙げます。
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480" Background="White" x:Name="Page">
<MediaElement Width="640" Height="480"
Source="Silverlight.wmv" AutoPlay="true"/>
<!-- 再生 -->
<Canvas Width="60" Height="40" Canvas.Left="8" Canvas.Top="480" MouseLeftButtonDown="mediaPlay" OpacityMask="#FF000000">
<TextBlock Width="38" Height="24" Text="Play" TextWrapping="Wrap"
FontWeight="Bold" Canvas.Top="8" Canvas.Left="14"/>
</Canvas>
<!-- 一時停止 -->
<Canvas Width="60" Height="40" Canvas.Left="72" Canvas.Top="480" MouseLeftButtonDown="mediaPause">
<TextBlock Width="44" Height="24" FontWeight="Bold" Text="Pause"
TextWrapping="Wrap" Canvas.Top="8" Canvas.Left="8"/>
</Canvas>
<!-- 停止 -->
<Canvas Width="60" Height="40" Canvas.Left="136" Canvas.Top="480" MouseLeftButtonDown="mediaStop">
<!-- フルスクリーン表示 -->
<Canvas Width="100" Height="40" Canvas.Left="200"
Canvas.Top="480" MouseLeftButtonDown="fullScreen">
<TextBlock Width="84" Height="24" FontWeight="Bold"
Text="Full Screen"TextWrapping="Wrap" Canvas.Top="8"
Canvas.Left="8"/>
</Canvas>
<TextBlock Width="40" Height="24" FontWeight="Bold" Text="Stop" TextWrapping="Wrap" Canvas.Top="8" Canvas.Left="12"/>
</Canvas>
</Canvas>
// 再生
function mediaPlay(sender, eventArgs) {
sender.findName("media").play();
}
// 一時停止
function mediaPause(sender, eventArgs) {
sender.findName("media").pause();
}
// 停止
function mediaStop(sender, eventArgs) {
sender.findName("media").stop();
}
// フルスクリーン表示
function fullScreen(sender, eventArgs) {
var SilverlightControl = sender.getHost();
SilverlightControl.content.fullScreen
= !SilverlightControl.content.fullScreen;
}
■ MediaElementオブジェクトのリファレンス
イベントに関しては、「Silverlightのイベント処理はどうなっているのか？」の章で詳しく解説しますが、MediaElementオブジェクトは、このようにメディアの扱いに関するイベント処理を定義し、思いのままにメディアをアプリケーションの中で使用できます。MediaElementオブジェクトのリファレンスは表2にまとめました。
| 項目 | タグ | |
|---|---|---|
| プロパティ | Attributes, AutoPlay、AudioStreamCount、AudioStreamIndex、Balance、BufferingProgress、BufferingTime、CanPause、CanSeek、Canvas.Left、Canvas.Top、Canvas.ZIndex、Clip、CurrentState、Cursor、DownloadProgress、Height、IsMuted、Markers、Name、NaturalDuration、NaturalVideoHeight、NaturalVideoWidth、Opacity、OpacityMask、Position、RenderTransform、RenderTransformOrigin、Resources、Source、Stretch、Tag、Triggers、Volume、Width | |
| メソッド | AddEventListener、CaptureMouse、Equals、FindName、GetHost、GetParent、GetValue、Pause、Play、ReleaseMouseCapture、RemoveEventListener、SetSource、SetValue、Stop | |
| イベント | BufferingProgressChanged、CurrentStateChanged、DownloadProgressChanged、Loaded、MarkerReached、MediaEnded、MediaFailed、MediaOpened、MouseEnter、MouseLeave、MouseLeftButtonDown、MouseLeftButtonUp、MouseMove | |
次のページでは、Silverlightでサポートする、または、しない動画・音声・ストリームのフォーマットとイベント処理の仕方を解説します。
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。