Mediaコントロール
Mediaコントロールは後述するXAMLコントロールと共にSilverlightを利用したサーバコントロールです。メディアファイルを参照設定することでWebページ上にSilverlightを組み込むことができます。もしSilverlightをインストールしていない状態で実行すると、図3のような画面が表示されます。画像をクリックすることでSilverlightをインストールできます（図4）。Silverlightをインストールしている状態で実行すると図5～6のように表示されます。
SilverlightはASP.NET以外のWeb技術と組み合わせて利用できますが、その場合には「Silverlight.jsファイル」と「Silverlightのプロパティや動作を記述した.jsファイル」が必要でした。しかし、Mediaコントロール・XAMLコントロールは「Silverlight.jsファイル」を準備することなく、Silverlightを利用できます。
Silverlightに関する内容はこちらの記事が非常に丁寧に書かれているので、興味がある方はそちらを参考にしてください。
Mediaコントロールはすべてのメディアファイルを参照することはできません。Silverlightがサポートしているメディアファイルと連動しているからです。現時点では以下の3種類のメディアファイルがMediaコントロールで参照できます。
- wmv
- wma
- mp3
続いて、以下の表1にMediaコントロールで設定できるプロパティの中で、頻繁に利用しそうな物をまとめてみました。サンプルの中ですべて使用はしていませんが、参照ください。
| プロパティ名 | 概要 |
| AutoPlay | Webページを開いた直後にメディアを再生するかどうか。既定ではFalse。 |
| Chapters | 設定したメディアにチャプター付けを行う。MediaChapterCollection型を利用。 |
| MediaChapter | メディア再生時に表示するチャプターの設定を行う再生開始時間（TimeIndex）、表示される静止画像（ImageUrl）と、チャプターのタイトル（Title）の設定を行う。 |
| LoopCount | 繰り返し再生する回数。0の場合は無限に再生。 |
| MediaSkin | メディア再生時のスキンの設定を列挙体の中から選択。既定ではProfessional。 |
| MediaUrl | 参照するメディアのURL。前述の3種類のファイル形式以外は再生できない。 |
| Muted | Webページを開いた直後にメディアの音をミュートで再生するかどうか。既定ではFalse。 |
| StartTime | メディアの再生開始の場所（メディアの長さ以内で）。 |
| Volume | ボリュームの大きさ（0～1）。 |
| OnClientChapterStarted | チャプター開始時に実行したいJavaScript。 |
| OnClientMarkerReached | メディアの再生時間がチャプターの位置に到達した時に実行したいJavaScript。 |
| OnClientMediaEnded | メディアの再生が終了した時に実行したいJavaScript。 |
| OnClientMediaFailed | メディアの再生が失敗した時に実行したいJavaScript。 |
| OnClientMediaOpened | メディアが再生された時に実行したいJavaScript。 |
| OnClientSizeChanged | Mediaコントロールのサイズが変更された時に実行したいJavaScript。 |
| OnClientStateChanged | メディアが一時停止や一時停止から再生など、メディアの状態が変わった時に実行したいJavaScript。 |
| OnClientVolumeChanged | メディアのボリュームが変更された時に実行したいJavaScript。 |
Mediaコントロールはフォームデザイナ上で張り付けた後、MediaUrlプロパティの参照だけ設定をすれば動作します。非常に扱いやすいコントロールなので、ASP.NETを利用したSilverlightアプリケーションの第一歩としては最適なコントロールの1つと言えます。
以下のサンプルはチャプターの組み込みやJavaScriptファイルを組み合わせた物です。図6のようにMediaコントロールの中に設定したチャプターが表示されます。チャプター画像をクリックすることで設定された再生開始時間までジャンプしてメディアが再生されます。JavaScriptの指定方法は通常の埋め込みの他にMediaコントロール内のScriptsプロパティでも設定ができます。以下のサンプルの実行画面は図5のようになります。ただし、「xxx.wmv」ファイルや「xxx.bmp」はサンプルファイルに含んでいません（容量が膨大になってしまうため）。実際にサンプルを動作させる場合は、wmvファイルとチャプターの静止画像を準備して設定を行って確かめてみてください。
<script type="text/javascript"> function alertMedia(sender){ alert("Start"); } </script> 中略 <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Media ID="Media1" runat="server" AutoPlay="True" Height="240px" MediaUrl="~/メディアファイル" Width="320px" Windowless="True" OnClientMediaOpened="alertMedia" OnClientVolumeChanged="VolumeChange" > <Scripts> <asp:ScriptReference Path="Volume.js" /> </Scripts> <Chapters> <asp:MediaChapter ImageUrl="~/画像ファイル" Title="はじめから" /> <asp:MediaChapter ImageUrl="~/画像ファイル" TimeIndex="10" Title="10秒後" /> <asp:MediaChapter ImageUrl="~/画像ファイル" TimeIndex="20" Title="20秒後" /> <asp:MediaChapter ImageUrl="~/画像ファイル" TimeIndex="30" Title="30秒後" /> </Chapters> </asp:Media>
続いて、Mediaコントロールのボリュームが変更された時にアラートを表示するJavaScriptファイルです。
function VolumeChange(sender, chapterEventArgs) { alert("VolumeChange"); }
以上の設定でMediaコントロールとJavaScriptを組み合わせたページの完成です。実行画面は図5～6のようになります。
