• [アーティクル]

Visual Studio 2010 自習書 ～ Do-It-Yourself シリーズ ～
XAML による Windows アプリケーション開発の基礎

第 10 回 メディア

更新日: 2011 年 1 月 27 日

ダウンロード (XPS、775 KB | PDF、719 KB)

目次

  1. <MediaElement> 要素を使用する
  2. MediaElement でのメディアのコントロール
    • コード ビハインド ロジックの記述
  3. MediaTimeline を使ったメディアの再生
  4. まとめ

XAML Do-It-Yourself 第 10 回は、メディアの操作について学習します。ここでは、音声や動画などのメディア ファイルの再生をアプリケーションでコントロールする方法を紹介します。

今回は、以下の内容について学習します。

  • メディア再生の基本
  • MediaTimeline によるメディア再生の制御

次に示す画面は、動画ファイルである WMV ファイルを再生するアプリケーションです。

図 1

1. <MediaElement> 要素を使用する

メディアの再生を行うアプリケーションを XAML で記述するにはいくつか方法がありますが、まず <MediaElement> 要素を利用してメディアの再生を行ってみます。

<MediaElement> 要素は、ウィンドウに音声や動画を配置するためのコントロールです。使用方法は非常に簡単で、パネルに <MediaElement> 要素を配置し、Source 属性でメディア ファイルの ファイル名や URI を指定するだけです。メディアとしては、WMV (Windows Media Video) ファイルのほかに、WMA (Windows Media Audio) ファイル、AVI ファイルなども指定できます。

以下のリストでは、Streatch 属性を Uniform (メディアの本来の縦横比を維持しながら、対象の領域に収まるようにサイズを変更) に設定しています。プロジェクトには media フォルダーを作成し、サンプル用のビデオ ファイルを追加してください。このファイルのプロパティは、ビルド アクションを「なし」にし、出力ディレクトリにコピーは「新しい場合はコピーする」を設定します。MediaElement の Source プロパティのファイル名は、追加したビデオ ファイル名に合わせてください。

<Window x:Class="WpfApplication10.MainWindow"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
    <Grid Background="Black">
        <MediaElement
            Source="media\bear.wmv"
            Width="400"
            Height="300"
            Stretch="Uniform"/>
    </Grid>
</Window>

これを実行すると、アプリケーションのウィンドウが開くと自動的に、動画の再生が開始します。

図 2

ページのトップへ

2. MediaElement でのメディアのコントロール

<MediaElement> 要素を用いたメディアのコントロールは、コード ビハインド ロジックを用意することで簡単に行えます。続いては、"Play"、"Pause"、"Stop" といったボタンを配置して、メディアの再生をコントロールしてみましょう。

以下の XAML コードに示すように、StackPanel 上に <MediaElement> 要素と、メディアのコントロールを行うための <Button> 要素を配置します。<Button> 要素にはそれぞれ、ボタンがクリックされた際に呼び出されるイベント ハンドラーを設定します。

また <MediaElement> 要素には、新たに LoadedBehavior 属性を追加し、値を "Manual" に設定します。この属性は、アプリケーションが起動して <MediaElement> 要素で指定したメディアがロードされた際の動作を指定するものです。"Manual" を指定すると、メディアがロードされても再生は開始されません。さらに Name 属性を使って <MediaElement> 要素に名前を付けて、コード ビハインド ロジックから <MediaElement> 要素を参照できるようにします。

<Window x:Class="WpfApplication10.MainWindow"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="400" Width="525">
    <StackPanel Background="Black">
        <MediaElement
            Source="media\Wildlife.wmv"
            Name="myMedia"
            Width="400"
            Height="300"
            LoadedBehavior="Manual"
            Stretch="Uniform" />

        <StackPanel HorizontalAlignment="Center" Width="400"
          Orientation="Horizontal">
            <!-- Play button. -->
            <Button Click="OnClickPlay" Margin="5" >Play</Button>

            <!-- Pause button. -->
            <Button Click="OnClickPause" Margin="5" >Pause</Button>

            <!-- Stop button. -->
            <Button Click="OnClickStop" Margin="5" >Stop</Button>
        </StackPanel>
    </StackPanel>
</Window>

コード ビハインド ロジックの記述

コード ビハインド ロジックでは、3 つのボタンのイベント ハンドラーを実装します。メディアのコントロールは非常に簡単で、<MediaElement> 要素を示す myMedia オブジェクトに対して、それぞれ Play、Pause、Stop メソッドを呼び出すだけです。

using System.Windows;

namespace WpfApplication10
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        // Play
        void OnClickPlay(object sender, RoutedEventArgs args)
        {
            myMedia.Play();
        }

        // Pause
        void OnClickPause(object sender, RoutedEventArgs args)
        {
            myMedia.Pause();
        }

        // Stop
        void OnClickStop(object sender, RoutedEventArgs args)
        {
            myMedia.Stop();
        }
    }
}

これを実行すると、次のようなウィンドウが表示されます。"Play" ボタンをクリックするとメディアの再生が開始されます。"Pause" ボタンを押すと再生が中断し、中断中に "Play" ボタンを再度クリックすると、中断した位置から再生が再開します。

図 3

ページのトップへ

3. MediaTimeline を使ったメディアの再生

これまで説明した方法とは別に、コード ビハインド ロジックを用いずに、メディアの再生をコントロールする方法もあります。これは、アニメーションの回で紹介した Storyboard を利用する方法です。

この場合には、<MediaElement> 要素の Source 属性にはメディア ファイルの指定を行いません。その代わりに、"Play" ボタンがクリックされた際のイベントで Storyboard を使い、そこで <MediaTimeline> 要素を使ってメディアの再生を行います。

MediaTimeline は、メディア再生のタイミングをコントロールするための要素です。開始時間 (BeginTime) や再生時間 (Duration) などを指定できますが、ここではそれらは指定せず、Source 属性に再生を行うメディア ファイルのファイル名を指定します。さらに MediaTimeline で管理するメディアを表示するオブジェクトを Storyboard.TargetName 属性で指定します。これには <MediaElement> 要素の名前 (ここでは "myMedia") を指定します。

ほかの Button についても、クリックされた場合のイベントを設定します。"Pause" ボタンがクリックされた場合のイベント (Button.Click) には、<PauseStoryboard> 要素を記述します。このとき、BeginStoryboardName 属性には、<BeginStoryboard> 要素で設定した名前を指定します。同様に "Resume" ボタンのイベントには <ResumeStoryboard> 要素を、"Stop" ボタンのイベントには <StopStoryboard> 要素を記述します。

<Window x:Class="WpfApplication10.Window1"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
            Title="Window1" Height="420" Width="450">
    <StackPanel Background="Black">

        <MediaElement
            Name="myMedia"
            Width="400"
             Height="300"
            Stretch="Uniform" />

        <StackPanel HorizontalAlignment="Center" Width="400" Orientation="Horizontal">
            <Button Name="btnPlay" Margin="10" >Play</Button>
            <Button Name="btnPause" Margin="10" >Pause</Button>
            <Button Name="btnResume" Margin="10" >Resume</Button>
            <Button Name="btnStop" Margin="10" >Stop</Button>
        </StackPanel>

        <StackPanel.Triggers>
            <!-- Play Button -->
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnPlay">
                <EventTrigger.Actions>
                    <BeginStoryboard Name= "myBegin">
                        <Storyboard>
                            <MediaTimeline
                                Source="media\Wildlife.wmv"
                                Storyboard.TargetName="myMedia" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

            <!-- Pause Button -->
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnPause">
                <EventTrigger.Actions>
                    <PauseStoryboard BeginStoryboardName="myBegin" />
                </EventTrigger.Actions>
            </EventTrigger>
            <!-- Resume Button -->
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnResume">
                <EventTrigger.Actions>
                    <ResumeStoryboard BeginStoryboardName="myBegin" />
                </EventTrigger.Actions>
            </EventTrigger>
            <!-- Stop Button -->
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnStop">
                <EventTrigger.Actions>
                    <StopStoryboard BeginStoryboardName="myBegin" />
                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
    </StackPanel>
</Window>

アプリケーションを実行して、"Play" ボタンでメディアが再生されます。ただし、先のコード ビハインド ロジックで実装した処理と異なり、"Pause" ボタンで再生を一時停止した場合、"Resume" ボタンをクリックしないと再生は再開されません。

図 4

ページのトップへ

4. まとめ

今回は メディアの操作について紹介しました。ここでは触れていませんが、音声ファイル (WMA ファイル) についても、今回紹介した方法で再生可能です。

次回は 2D グラフィックスについて学習します。

ページのトップへ