Silverlight 1.0でメディアを操作する

Silverlightで動画を再生する

自動再生の無効化

　ビデオの自動再生は便利な機能ですが、場合によっては、自動再生を既定で無効にした方が適切なこともあります。たとえば、ページに複数のビデオが埋め込まれている場合、この機能は非常に邪魔になります。自動再生機能を無効にするには、次のように、<MediaElement>要素のAutoPlay属性をFalseに設定します。

<Canvas Width="544" Height="595" Canvas.Left="8" Canvas.Top="8">    
    <MediaElement x:Name="WindowsMedia_wmv" 
       AutoPlay="False" 
       Width="320" Height="240" 
       Source="WindowsMedia.wmv" 
       Stretch="Fill"/>
</Canvas>

　次に、ビデオをどのような場合に、どのような方法で再生するかを決定します。ユーザーのマウスがビデオの上に移動したらビデオを再生し、ビデオから離れたら一時停止するように、プログラムで制御することにします。また、ユーザーがビデオをクリックしたら、再生を停止して最初まで巻き戻すことにします。このような処理を行うには、次の太字で示す属性を設定します。

<Canvas Width="544" Height="595" Canvas.Left="8" Canvas.Top="8">    
    <MediaElement x:Name="WindowsMedia_wmv" 
           AutoPlay="False" 
           MouseEnter="MouseEnter"
           MouseLeave="MouseLeave"
           MouseLeftButtonDown="MouseClick"
           Width="320" Height="240" 
           Source="WindowsMedia.wmv" 
           Stretch="Fill"/>
</Canvas>

　ここでは基本的に、<MediaElement>要素によって処理される各種イベントのイベントハンドラを設定しています。イベントハンドラを記述するには、［Project］ウィンドウに移動し、「Page.xaml.js」ファイルをダブルクリックします。

　「Page.xaml.js」ファイルに、次のコードを追加します。

function MouseEnter (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.play();
}

function MouseLeave (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.pause();
}

function MouseClick (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.stop();
}

　findName()メソッドを使用すると、Silverlightページ上の指定された要素（x:Name属性によって識別されます）への参照をプログラムで取得できます。この例では、MediaElementオブジェクトのインスタンスを参照しています。このオブジェクトは、play、pause、およびstopプロパティをサポートしています。

　F5キーを押して、アプリケーションを再度テストします。今回は、マウスがビデオの上に移動すると再生が始まり、マウスがビデオから離れると一時停止します。ビデオを再度初めから再生するには、ビデオをクリックします。

鏡像効果の作成

　ビデオに対するおもしろい操作として、鏡像効果を作成してみましょう。図4に、下に鏡像を同時再生するビデオの例を示します。

図4　鏡像: ビデオに対するおもしろい操作として、鏡像効果を作成します。

　この鏡像を作成するには、まず、元のCanvasオブジェクトを修正します。そのためには、XAMLビューに切り替えて、リスト1の太字のコードを追加します。

　これにより、ビデオは、図5に示すような形に変形します。

図5　ビデオの変形: 元のビデオを変形します。

　次に、リスト2のような<MediaElement>要素を追加して、鏡像効果をシミュレートします。

　これで、正像のビデオと鏡像のビデオが作成されます（図6を参照）。

図6　2つのビデオ: 2つのビデオがあるページ

　鏡像を半透明にするには、Opacity属性を0～1の値に設定します。

<MediaElement x:Name="WindowsMedia_wmv1" 
   AutoPlay="False" 
   MouseEnter="MouseEnter"
   MouseLeave="MouseLeave"
   MouseLeftButtonDown="MouseClick"
   Width="319.125" Height="125.423" 
   Source="WindowsMedia.wmv" 
   Stretch="Fill" 
   Canvas.Left="188.405" Canvas.Top="523.848" 
   Opacity="0.3">

　さらに、「Page.xaml.js」の後続のコードブロックをリスト3のように修正します。

　各イベントハンドラ内でfindName()メソッドを使用してメディアオブジェクトを探すのではなく、handleLoad()関数を使用して探すこともできます。また、このページ内にある2つのビデオは同じものなので、鏡像として作成したビデオを自動再生する必要はありません。同じ理由から、ボリュームプロパティを0に設定してボリュームをオフにします（使用可能な値は0～1です）。

　F5キーを押して、ページをテストしてみましょう。上部に配置されたビデオの上にマウスが移動すると、両方のビデオの再生が始まります。

Silverlightのその他の機能

　この記事では、Silverlightの<MediaElement>オブジェクトが持つ機能について、ごく簡単に説明しました。Silverlightのメディア機能の詳細については、ここのドキュメントを参照してください。