wpf で簡 単ビデオ再生 2008 年 5 月 27 日 ( 火 )

自己紹介イントロダクションMediaElementMediaPlayer独立モードとクロックモードビデオキャプチャ Q&A

WPFWPF で簡単ビデオ再生で簡単ビデオ再生

WPF のビデオの概要MediaElement の使い方、特徴を理解MediaPlayer の使い方、特徴を理解簡単なビデオプレーヤーが作れる

今日帰るときには・・・今日帰るときには・・・

2000 ごろは、 Java/Unix 系でしたMicrosoft は嫌いだったので、 2000-2002 ぐらいまで、 Java/Unix 系で Web Server を立てて、 HP を作っていた。日曜管理者なので、カーネルのメインテナンスに疲れ果てた。少し金を払ってもいいから、楽にサーバーを運用したかったので、 Windows 系に乗り換えた。

Windows 系の開発をしたことがなかったのでVisual Studio 2002 C# Beta が出たので、触ってみた。すげー！！

コミュニティいろいろな素晴らしい人と出会える。面白い！理屈はいらないでしょ。

なんで、そんなことしているの？なんで、そんなことしているの？

2002 年に Visual Studio 2002 Beta が出たBeta はタダだったので、使ってみた。.NET/C# のすごさに触発された。わからないことがいろいろあるが、 C#/.NET 関連の日本語 HP がほとんどなかった。せっかく調べたのに、忘れてしまうともったいなので、少しづつまとめて、宇宙仮面の C# プログラミングというページを作成していた。すこしづつ C# ユーザーが増え、掲示板にも書きこまれるようになった。.NET/C# Group を開始どなたかが、 MVP に推薦してくれたらしい。最初、マルチ商法みたいで怖かったから、テキトーにあしらっていた。Microsoft KK から直接説明があったので、お受けすることに。2003/10 MVP for Visual Developer C# 受賞

MVPMVP を受賞したきっかけは？を受賞したきっかけは？

WPF でビデオ・音声メディアを再生するには、 MediaElement 、または MediaPlayer を使います。それぞれ特徴があるので、しっかり押さえておきたい。

MediaElement は、 WPF に統合されているので、アルファブレンディングや 3D の表面にレンダリングも可能

MediaPlayer には直接的なビジュアル表現がないので、レイアウト上は直接使えません。しかし、 Windows Media Player ランタイムを起動する必要がないため、高速に起動できます。また、ビジュアル表現がないので、音声の再生にも適しています。

MediaElement MediaElement と と MediaPlayerMediaPlayer

<Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="WpfApplication3.Window1"x:Name="Window"Title="Window1"Width="320" Height="240" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

<Grid> <MediaElement Source="Test.wmv"

LoadedBehavior="Play"/> </Grid></Window>

MediaElementMediaElement により、単純にビデオを再生により、単純にビデオを再生

Expression Blend を使用してメディアを再生する WPF プロジェクトを簡単に作ることができます。

1. WMV などのメディアをプロジェクトに追加する。2. WMV ファイルをダブルクリックするか、フォーム上に Drag & Drop する。

Expression Blend Expression Blend によるによる WPF WPF プロジェクトの自動生成プロジェクトの自動生成

<Window ・・・ >

<Window.Resources>

<Storyboard x:Key="Test_wmv">

<MediaTimeline Source="Test.wmv" BeginTime="00:00:00" Storyboard.TargetName="Test_wmv" d:DesignTimeNaturalDuration="233.129"/>

</Storyboard>

</Window.Resources>

<Window.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<BeginStoryboard Storyboard="{StaticResource Test_wmv}"/>

</EventTrigger>

</Window.Triggers>

<Grid x:Name="LayoutRoot">

<MediaElement Margin="62,46,255,78" x:Name="Test_wmv" Stretch="Fill"/>

</Grid>

</Window>

Expression Blend Expression Blend によるによる WPF WPF プロジェクトの自動生成プロジェクトの自動生成

ストリーボードなしのシンプルな XAML が生成されます。Silverlight2 では、まだ MediaTimeline がサポートされていません。

<UserControlxmlns="http://schemas.microsoft.com/client/2007"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="SilverlightApplication6.Page"Width="320" Height="240">

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

Source="Test.wmv" Stretch="Fill"/></Grid>

</UserControl>

Silverlight2 Silverlight2 によるによる WPF WPF プロジェクトの自動生成プロジェクトの自動生成

MediaElement コントロールは System.Windows.UIElement クラスから継承されているので、他の UIElement コントロールを配置できるところであればどこでも配置できます。

WPF WPF コントロールの内部にビデオを埋め込むコントロールの内部にビデオを埋め込む

<Button Click="Button_Click"><MediaElement

x:Name="Test_wmv“LoadedBehavior="Manual”Source="Test.wmv" Stretch="Fill“ />

</Button>-----------// C# 再生用コードthis.Test_wmv.Play(); 　　　

MediaElement の MediaOpened でプログレスバーの最大値を設定Storyboard の CurrentTimeInvalidated でプログレスバーの値を設定する

プログレスバーの表示プログレスバーの表示

<MediaElement Name="myMedia" MediaOpened="myMedia_MediaOpened"/>

…<Storyboard Storyboard.TargetName="myMedia"

CurrentTimeInvalidated="Storyboard_CurrentTimeInvalidated">

<MediaTimeline Source="Test.wmv" x:Name="mTimeline" BeginTime="00:00:00" Duration="00:10:05" /> </Storyboard>

C# 実装部分

プログレスバーの表示プログレスバーの表示

private void Storyboard_CurrentTimeInvalidated(…) { this.progressBar1.Value =

myMedia.Position.TotalMilliseconds;}

private void myMedia_MediaOpened(...){ this.progressBar1.Maximum =

myMedia.NaturalDuration.TimeSpan.TotalMilliseconds;}

注意：メディアを対話的に停止、一時停止、および再生できるようにするには、

MediaElement の LoadedBehavior プロパティを Manual に設定する必要があります。

再生： myMediaElement.Play();停止： myMediaElement.Stop();一時停止： myMediaElement.Pause();再生位置の変更 :

TimeSpan ts = new TimeSpan(0, 0, 0, 0, SliderValue); myMediaElement.Position = ts;ボリュームの変更： myMediaElement.Volume =

(double)volumeSlider.Value;再生スピードの調整： myMediaElement.SpeedRatio =

(double)speedRatioSlider.Value;

再生、停止、一時停止、再生位置の変更、ボリュームの変再生、停止、一時停止、再生位置の変更、ボリュームの変更、再生スピードの調整更、再生スピードの調整

MediaElement を使用した場合、 Windows Media Player ランタイムを起動する必要があるため、メディアを最初に再生するときに、遅延が生じる場合があります。このため、メディア ファイルとユーザー イベントやアニメーションと正確に同期を取って再生することができません。

対策1. メディア ファイルを事前に読み込み、使用準備が整うまで一時停止状態にしておく。2. <Storyboard SlipBehavior="Slip"> を指定します。すると、メディアの再生が開始するまで、アニメーションが停止してくれます。

再生時の遅延対策再生時の遅延対策

ModelVisual3D の中で、 VisualBrush の MediaElement ソースにメディアファイルを指定します。

<GeometryModel3D.Material><DiffuseMaterial> <DiffuseMaterial.Brush> <VisualBrush> <VisualBrush.Visual> <MediaElement Source="Test.wmv" /> </VisualBrush.Visual> </VisualBrush> </DiffuseMaterial.Brush></DiffuseMaterial></GeometryModel3D.Material>

ビデオを ビデオを 3D 3D の表面にマップするの表面にマップする

メディアを再生するもう一つの方法として、 MediaPlayer があります。MediaElement は、基本的に MediaPlayer クラスのラッパーなので、 MediaElement で実現できることは MediaPlayer で実現できます。

MediaPlayer は- 音楽を再生する- より複雑な処理に使用します。

MediaPlayer MediaPlayer の用途の用途

MediaPlayer のプロパティや、イベントを設定することにより、たとえば次のような操作が可能です。メディア ファイルの位置を取得または設定 Position プロパティに TimeSpan オブジェクトを設定します。

例バッファリングの進行状況 BufferingProgress プロパティ再生の進行状況 DownloadProgress プロパティオーディオ コントロール Balance プロパティ、

Volume プロパティを設定メディアの開始を知る MediaOpened イベントメディアの終了を知る MediaEnded イベント

主なプロパティ主なプロパティ

WAV オーディオだけの再生であれば、 System.Media.SoundPlayer クラスが利用できます。

いろいろな種類の音楽を再生するには、 MediaPlayer クラスを使用するのが良いでしょう。

MediaPlayer mp = new MediaPlayer();

Try

{

mp.Open(new Uri(@"..\..\Test.wma", UriKind.Relative));mp.Play();

}

catch (Exception ex)

{

MessageBox.Show(ex.Message);}

ビデオを ビデオを 3D 3D の表面にマップするの表面にマップする

<Rectangle Stroke="Black" MouseDown="OnClick1" …> <Rectangle.RenderTransform> <TransformGroup>

… </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Fill> <DrawingBrush> <DrawingBrush.Drawing> <VideoDrawing x:Name="MyVideoDrawing“… /> </DrawingBrush.Drawing> </DrawingBrush> </Rectangle.Fill> </Rectangle>

MediaPlayer, DrawingBrush MediaPlayer, DrawingBrush を使って、ビデオをコントを使って、ビデオをコントロールに描画するロールに描画する

C# 実装部分

void OnClick1(object sender, RoutedEventArgs e){

MediaPlayer MyPlayer = new MediaPlayer();MyPlayer.Open(new Uri(@“..\..\Test.wmv”, 　　UriKind.Relative));MyVideoDrawing.Player = MyPlayer;

MyPlayer.Play();}

MediaPlayer, DrawingBrush MediaPlayer, DrawingBrush を使って、ビデオをコントを使って、ビデオをコントロールに描画するロールに描画する

22 つのビジュアルに同時プレイつのビジュアルに同時プレイ

void OnLoaded(object sender, RoutedEventArgs e) { MediaPlayer MyPlayer = new MediaPlayer(); MyPlayer.Open(new Uri(@"..\..\Test.wmv",

UriKind.Relative)); MyVideoDrawing.Player = MyPlayer; MyVideoDrawing1.Player = MyPlayer; MyPlayer.Play(); }

C# 実装部分

MediaElement 、および MediaPlayer は、独立モードとクロック モードの 2 つのモードがあります。 通常の再生だけであれば、独立モードで OK です。

独立モード <MediaElement Source="Test.wmv" Width="320" Height="240" LoadedBehavior="Play"/>

クロックモードExpression Blend で、メディアを追加した場合、クロックモードで WPF が生成されます。

独立モードとクロックモード独立モードとクロックモード

MediaElement はイメージに似ており、直接 Source URI を指定できます。標準のメディアを再生および制御する場合、 Storyboard や MediaTimeline を扱う必要はありません。通常の再生だけであれば、独立モードで OK です。Clock が null の場合、メディア オブジェクトは独立モードです。特徴- メディアの Uri を直接指定することができます。- メディアの再生を直接制御できます。- メディアの Position プロパティと SpeedRatio プロパティを変更できます。独立モードの例

<MediaElement Source="Test.wmv" Width="320" Height="240" LoadedBehavior="Play"/>

Clock Clock が が null null の場合の場合

MediaElement は、 MediaTimeline によって、メディアの再生が実行されます。

特徴- メディアの Uri は、 MediaTimeline を通じて間接的に設定されます。- メディアの再生をクロックで制御できます。メディア オブジェクトのコントロール メソッドは使用できません。

Expression Blend で、メディアを追加した場合、クロックモードで WPF が生成されます。ClockController プロパティを使用すれば、対話形式でクロックを開始、 一時停止、再開、シーク、区間の最後までの前進、停止ができます。

Clock Clock が が Null Null ではない場合ではない場合

private void Button_Click(object sender, RoutedEventArgs e) {

this.Test_wmv.Clock.Controller.Pause(); 　　　　 // クロックの Pause

}

private void Button_Click_1(object sender, RoutedEventArgs e) {

this.Test_wmv.Clock.Controller.Seek(new TimeSpan(0, 0, 30), TimeSeekOrigin.BeginTime); // クロックをシーク

this.Test_wmv.Clock.Controller.Resume();

}

private void Window_Loaded(object sender, RoutedEventArgs e) {

MediaTimeline mTimeline =

new MediaTimeline(new Uri(@"..\..\Test.wmv", UriKind.Relative));

MediaClock mClock = mTimeline.CreateClock();

this.Test_wmv.Clock = mClock;

this.Test_wmv.Clock.Controller.Begin();

}

クロックモードクロックモード

<Rectangle Stroke="Black" MouseLeftButtonDown="Rectangle_MouseDown" RenderTransformOrigin="0.5,0.5" Margin="102,11,14,0" Height="89.305" VerticalAlignment="Top">

<Rectangle.RenderTransform> <TransformGroup> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Fill> <DrawingBrush> <DrawingBrush.Drawing> <VideoDrawing x:Name="MyVideoDrawing…/> </DrawingBrush.Drawing> </DrawingBrush> </Rectangle.Fill> </Rectangle>

<Image Height="30" HorizontalAlignment="Left“ Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="72" />

MediaPlayer MyPlayer = new MediaPlayer();

private void Rectangle_MouseDown(…) {

MyPlayer.Open(new Uri(@"..\..\Test.wmv", UriKind.Relative));

MyVideoDrawing.Player = MyPlayer;

MyPlayer.Play();

}

private void button1_Click(…) {

RenderTargetBitmap rtb = new RenderTargetBitmap((int)image1.Width, (int)image1.Height, 1 / 200,

1 / 200, PixelFormats.Pbgra32);

DrawingVisual dv = new DrawingVisual();

DrawingContext dc = dv.RenderOpen();

dc.DrawVideo(MyPlayer, new Rect(0, 0, (int)image1.Width, (int)image1.Height));

dc.Close();

rtb.Render(dv);

this.image1.Source = BitmapFrame.Create(rtb);

using (FileStream stream = new FileStream("capture.png", FileMode.Create)) {

PngBitmapEncoder encoder = new PngBitmapEncoder();

encoder.Frames.Add(BitmapFrame.Create(rtb));

encoder.Save(stream);

}

}

}

C# C# 実装部分実装部分

宇宙仮面の C# http://uchukamen.com

MSDN MediaElement クラスhttp://msdn.microsoft.com/ja-jp/library/system.windows.controls.mediaelement.aspx

WPF を使ってコントロールと 3D の表面にビデオを追加するhttp://msdn.microsoft.com/ja-jp/magazine/cc163455.aspx