Silverlight-ビデオとオーディオ

この章では、Silverlight機能がビデオとオーディオをどのように再生しているかを見ていきます。 MediaElement は、Silverlightのすべてのビデオとオーディオの中心です。これにより、アプリケーションにオーディオとビデオを統合できます。 MediaElement クラスは、 Image クラスと同様に機能します。メディアに向けるだけで、オーディオとビデオがレンダリングされます。

主な違いは動画である点ですが、MP3などの音声のみで動画を含まないファイルをポイントすると、画面に何も表示されずに再生されます。

UI要素としてのMediaElement

*MediaElement* は、すべてのSilverlightユーザーインターフェイス要素の基本クラスであるフレームワーク要素から派生します。 つまり、すべての標準プロパティが提供されるため、不透明度を変更したり、クリップを設定したり、クリップを変換したりできます。

*MediaElement* の簡単な例を見てみましょう。

Visual Studio用Microsoft Blendを開き、新しいSilverlightアプリケーションプロジェクトを作成します。

MediaElementアプリ

次に、ビデオまたはオーディオファイルをBlendデザインサーフェイスにドラッグします。

MediaElementアプリケーション

MediaElementをサーフェスに追加し、プロジェクトにビデオファイルのコピーも追加します。ソリューションエクスプローラーで確認できます。

MediaElementからSurface

移動したり、サイズを変更したり、回転などを適用したりできます。

回転

これで、以下に示すような MainPage.xaml ファイルに関連するXAMLが生成されます。

<UserControl x:Class = "MediaElementDemo.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d"
   d:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"
         Margin = "51,49,53,53"
         Source = "/Microsoft Silverlight DEMO.mp4"
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

         <MediaElement.RenderTransform>
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform>

      </MediaElement>

   </Grid>

</UserControl>

上記のアプリケーションをコンパイルして実行すると、Webページでビデオが再生されていることがわかります。

XAML Generate

制御

*MediaElement* はメディアを提示するだけです。 標準のプレーヤーコントロールは提供しません。 自動的に再生を開始し、最後に達すると停止します。ユーザーが一時停止または制御するためにできることはありません。 そのため、実際には、ほとんどのアプリケーションは、ユーザーにそれ以上の制御を提供したいと思うでしょう。

*AutoPlay* を *False* に設定すると、自動再生を無効にできます。 つまり、メディアプレーヤーは、尋ねるまで何も再生しません。

<MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"
   AutoPlay = "False"
   Margin = "51,49,53,53"
   Source = "/Microsoft Silverlight DEMO.mp4"
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

そのため、ビデオを再生する場合は、* MediaElement Play（）メソッド*を呼び出すだけです。また、停止および一時停止メソッドも提供します。

同じ例をもう一度見て、少し変更して、少し制御できるようにします。以下のXAMLコードに示すように、 MediaElement に MouseLeftButtonDown ハンドラーを接続します。

<UserControl x:Class = "MediaElementDemo.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d"
   d:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"
         AutoPlay = "False"
         MouseLeftButtonDown = "Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown"
         Margin = "51,49,53,53"
         Source = "/Microsoft Silverlight DEMO.mp4"
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
      </MediaElement>

   </Grid>

</UserControl>

以下は、 MouseLeftButtonDown イベントハンドラーの実装です。ここでは、メディア要素の現在の状態がプレーティングされている場合にビデオを一時停止し、そうでない場合はビデオの再生を開始することを確認します。

using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace MediaElementDemo {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {

         if (Microsoft_Silverlight_DEMO_mp4.CurrentState == MediaElementState.Playing) {
            Microsoft_Silverlight_DEMO_mp4.Pause();
         } else {
            Microsoft_Silverlight_DEMO_mp4.Play();
         }
      }
   }
}

上記のコードをコンパイルして実行すると、 AutoPlay プロパティが False に設定されているため、空白のWebページが表示されます。 Webページをクリックすると、ビデオが開始されます。

AutoPlay Generate

Webページをもう一度クリックすると、ビデオが一時停止します。

Silverlight-video-audio

Silverlight-ビデオとオーディオ

UI要素としてのMediaElement

制御