メディア

Silverlight は、WMV (Windows Media Video) や WMA (Windows Media Audio) ファイルを再生するために使える MediaElement オブジェクトを提供しています。

このドキュメントは、以下のセクションで構成されています。

ページにメディアを追加する
MediaElement の便利なプロパティ
メディア再生における対話制御
フルスクリーンでのメディアの再生
動画による塗りつぶし
次のステップ

ページにメディアを追加する

ファイルにメディアを追加するためには、MediaElement を作成し、メディアファイルの位置を Source プロパティで指定します。以下に例を示します。

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement 
    Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
</Canvas>

[hide] [restart]

他の UIElement オブジェクトと同じく、MediaElement の上にも描画できます。以下の例は、前の例において MediaElement の手前に Ellipse を追加しています。

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <MediaElement Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
  
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
     Opacity="0.6" />
</Canvas>

[hide] [restart]

MediaElement の便利なプロパティ

MediaElement のプロパティには、UIElement が持つ Opacity や Clip に加えて、メディアに特化したプロパティが提供されています。

Stretch: MediaElement に対して動画をどのように表示するかを指定します。None、Uniform、UniformToFill、Fill のいずれかを取ります。デフォルトは Fill です。 Stretch の詳細については、Silverlight SDK をご覧ください。
IsMuted: MediaElement が無音かどうかを指定します。 True の場合は、MediaElement は無音です。デフォルト値は、 False です。
Volume: MediaElement オブジェクトの音声の音量を、 0 から 1 の数値で指定します。デフォルト値は 0.5 です。

これ以外の MediaElement のプロパティについては、Silverlight SDK をご覧ください。

メディア再生における対話制御

メディア再生は、play、pause、 stop メソッドを使って対話型で制御できます。以下の例では、play、pause、 stop メソッドを使ってメディアの再生を制御しています。

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement x:Name="media" 
    Source="thebutterflyandthebear.wmv" 
    Width="300" Height="300" />

  <!-- Stops media playback.-->    
  <Canvas MouseLeftButtonDown="media_stop" 
    Canvas.Left="10" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
  </Canvas>
  
  <!-- Pauses media playback. -->
  <Canvas MouseLeftButtonDown="media_pause" 
     Canvas.Left="70" Canvas.Top="265">
    <Rectangle Stroke="Black" 
       Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
  </Canvas>
  
  <!-- Begins media playback. -->
  <Canvas MouseLeftButtonDown="media_begin" 
    Canvas.Left="130" Canvas.Top="265">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
       Height="30" Width="55">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
  </Canvas>
     
</Canvas>

[hide JavaScript]

function media_stop(sender, args) {
    sender.findName("media").stop();
}

function media_pause(sender, args) {
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    sender.findName("media").play();
}

[hide] [restart]

フルスクリーンでのメディアの再生

フルスクリーンでメディアを再生するためには、コンテンツをホストしているコントロールの FullScreen プロパティを True に設定し、コントロールが返す ActualWidth と ActualHeight に合わせて、 MediaElement の大きさを調整します。

以下の例は、前のサンプルで定義された対話型コントロールの再生にフルスクリーン再生を追加しています。

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="canvas_loaded">
    
  <MediaElement x:Name="media" 
     Source="thebutterflyandthebear.wmv" 
     Width="300" Height="300" />

  <Canvas x:Name="buttonPanel">
  
    <!-- Stops media playback.-->    
    <Canvas MouseLeftButtonDown="media_stop" 
       Canvas.Left="10" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Orange" Offset="0.0" />
            <GradientStop Color="Red" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
    </Canvas>
  
    <!-- Pauses media playback. -->
    <Canvas MouseLeftButtonDown="media_pause" 
       Canvas.Left="70" Canvas.Top="265">
      <Rectangle Stroke="Black" 
         Height="30" Width="55" RadiusX="5" RadiusY="5">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Orange" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>       
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
    </Canvas>
  
    <!-- Begins media playback. -->
    <Canvas MouseLeftButtonDown="media_begin" 
       Canvas.Left="130" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="55">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="LimeGreen" Offset="0.0" />
            <GradientStop Color="Green" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
    </Canvas>
  
    <!-- Switches to full screen mode. -->
    <Canvas MouseLeftButtonDown="toggle_fullScreen" 
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock> 
    </Canvas>  
  
  </Canvas>
     
</Canvas>

[hide JavaScript]

function media_stop(sender, args) {

    sender.findName("media").stop();
}

function media_pause(sender, args) {
    
    sender.findName("media").pause();
}

function media_begin(sender, args) {
    
    sender.findName("media").play();
}


function canvas_loaded(sender, args)
{
  
    var plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
    

}

function toggle_fullScreen(sender, args)
{
    var silverlightPlugin = sender.getHost();
    silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;  
   
}

function onFullScreenChanged(sender, args)
{

  
    var silverlightPlugin = sender.getHost();
    var buttonPanel = sender.findName("buttonPanel");
    
    if (silverlightPlugin.content.fullScreen == true)
    {
      buttonPanel.opacity = 0;
    }
    else 
    {
      buttonPanel.opacity = 1;
    }
    
    var mediaPlayer = sender.findName("media");
    mediaPlayer.width = silverlightPlugin.content.actualWidth;
    mediaPlayer.height = silverlightPlugin.content.actualHeight;
     

}

[hide] [restart]

ビデオによる塗りつぶし

VideoBrush を使うと、動画を使って図形やテキストを塗りつぶすことができます。 VideoBrush を使うために、以下の手順にしたがってください。

VideoBrush 要素を作成する。
MediaElement を作成し、名前をつける。この MediaElement は VideoBrush の動画ストリーミングを処理するもの。動画を2つ見たいのでなければ、MediaElement の Opacity は 0.0 にしておく。音声が必要ないなら、MediaElement の IsMuted プロパティは True にしておく。
VideoBrush の SourceName プロパティに作成した MediaElement につけた名前を指定する。

以下の例は、TextBlock の Foreground を塗りつぶすために VideoBrush を使っています。

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement x:Name="myMediaElement" 
    Source="thebutterflyandthebear.wmv" 
    Width="300" Height="300"
    Opacity="0" IsMuted="True" />  
  
  <TextBlock Canvas.Left="10" Canvas.Top="10"
    FontFamily="Verdana"
    FontSize="80" FontWeight="Bold">Watch<LineBreak/>This
    <TextBlock.Foreground>
      <VideoBrush SourceName="myMediaElement" />
    </TextBlock.Foreground>
  </TextBlock>
  
</Canvas>

[hide] [restart]

MediaElement の中止(stop)、一時停止(pause)、再生(play)は、関連付けた VideoBrush に影響しますが、 MediaElement のサイズや不透明度を変えても影響しません。ひとつの MediaElement を複数の VideoBrush オブジェクトで使うこともできます。

次のステップ

次のトピック、アニメーションは、Silverlight オブジェクトをアニメーションさせる方法について解説します。