SilverlightならWeb上で高精細な動画再生も簡単？：.NETを知らない人でも分かるSilverlight入門（2）（1/3 ページ）

» 2008年01月29日 00時00分公開

編集部注：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／ファイル名になります。読者の環境に応じて適宜変えてください）。

Page.xamlの一部

<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オブジェクトで使用する主なプロパティを列挙しました。

**表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）になると思います。そのため、ここではイベントの例として、先の使用例にこれらのイベントを追加したものを例として挙げます。

Page.xamlの一部

<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>

Page.xaml.jsの一部

// 再生
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にまとめました。

**表2　<MediaElement>タグリファレンス**
	項目	タグ
	プロパティ	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