メディアをホストするMediaPlayerコントロール
Silverlightが.NET開発者以外から注目を集めているのはメディア配信の分野です。特にPlayReadyという新たなDRM(Digital Rights Management:デジタル著作権管理)は既存のFlashユーザーからも注目を集めています。Silverlightを利用する場合、本来は必要なXAMLやJavaScriptの知識がなくとも、プロパティ設定を行うだけでSilverlightを利用したメディアのホストが容易に行うことができるのがMediaPlayerコントロール最大のメリットです。
ただし、JavaScriptを利用してプレーヤー操作時のイベントを操作できるのもMediaPlayerコントロールのメリットとも言えます。つまり、お手軽にメディアをホストできるが、同時にさまざまな設定も受け付けてくれるというのがMediaPlayerコントロールの魅力と言えます。
実際にホストした画面はこちらになります(図10~12)。メディアをダブルクリックすることで最大化もできますが、これもMediaPlayerコントロール側で自動設定しているため、ユーザーが何か手を加える必要はありません。
MediaPlayerコントロールがサポートしているメディアファイルは次のとおりです。
- wmv
- wma
- nmp3
詳細な情報はMSDNに記述されています。興味のある方は参照してください。
続いて、MediaPlayerコントロールの内、多用するであろうプロパティを以下の表にまとめました。メディアファイルを扱うコントロールなので、必然的にそれに絡んだプロパティが多くなっています。
メンバ名 | 概要 |
AutoLoad | メディアファイルを自動的に読み込むかどうか取得/設定 |
AutoPlay | メディアファイルを開いたときに直ぐ再生するかどうか取得/設定 |
Chapters | メディアファイルのチャプタ一覧を取得。各チャプタはChaptersプロパティのコレクション内にMediaChapterオブジェクトとして、タイトル、開始時間、パスなどを設定 |
MaxFrameRate | 1秒間の最大フレーム数を取得/設定 |
MediaDefinition | チャプタの位置、タイトル、サムネイルのパスなどのメディアソース関連のデータが格納されたXMLファイル(メディア定義ファイル)のパスを取得/設定 |
MediaSkinSource | MediaPlayerコントロールに使用されているスキンを定義する値を取得/設定 |
MediaSource | MediaPlayerのメディアファイルを取得/設定 |
Muted | 既定でミュートにするかどうかを取得/設定 |
OnClientChapterSelected | チャプター選択時に呼び出されるJavaScriptの関数名を取得/設定 |
OnClientVolumeChanged | ボリューム変更時に呼び出されるJavaScriptの関数名を取得/設定 |
OnPluginLoaded | Silverlightが読み込まれている時に呼び出されるJavaScriptの関数名を取得/設定 |
PlaceholderSource | メディアファイル読み込み完了前に表示される.jpg、.jpeg、.pngなどの画像ファイルを取得/設定 |
SplashScreenSource | Silverlightコンテンツの読み込み中に表示されるスプラッシュスクリーンドキュメントのURLを取得/設定 |
Volume | ボリュームの初期値を0 ~ 1の範囲で取得/設定 |
MediaPlayerコントロールはあくまで、メディアファイルをSilverlightとしてホストするコントロールです。つまり、Silverlight 2から利用可能なマネージコードで処理を記述するのではなく、JavaScriptファイルに処理を記述することになります。MediaPlayerコントロールには、JavaScriptファイル呼び出しのためのイベントハンドラが数多くあります。
以下のサンプルでは、メディアファイルの設定と、各種メディアの取り扱いに関する設定のみを行っています。本稿のサンプルでは、メディアファイルはサイズの肥大化につながるので添付していません。サンプルを実行する際には自身で用意したうえで設定を行ってください。
<asp:ScriptManager ID="ScriptManager1" runat="server" > <Scripts> <asp:ScriptReference Path="~/Chapter.js" /> </Scripts> </asp:ScriptManager> <asp:MediaPlayer ID="MediaPlayer1" runat="server" Height="402px" Width="520px" PluginBackground="AntiqueWhite" OnClientChapterSelected="SelectedChapter" AutoLoad="true" AutoPlay="true" MediaSource="~/メディアファイル名"> <Chapters> <asp:MediaChapter ThumbnailSource="~/チャプター画像" Position="8" /> <asp:MediaChapter ThumbnailSource="~/チャプター画像" Position="38" /> <asp:MediaChapter ThumbnailSource="~/チャプター画像" Position="98" /> <asp:MediaChapter ThumbnailSource="~/チャプター画像" Position="164" /> </Chapters> </asp:MediaPlayer>
プロパティ設定の部分なので、ご覧いただければ分かると思います。注目点はScriptManagerコントロールのScriptsコレクションにJavaScriptファイルの指定を行っている点です。OnClientChapterSelected
プロパティで設定されたSelectedChapter
関数は、チャプター選択時にChapter.jsファイル内のSelectedChapter
関数を呼び出して実行しています。
肝心のSelectedChapter
関数はアラートを呼び出しているだけです。
function SelectedChapter(sender, chapterEventArgs) { alert("選択したチャプターから再生を開始します。"); }
以上の設定で、チャプターを選択した場合には、「選択したチャプターから再生を開始します。」というアラートが出た後、チャプター再生が行われるページの完成です。