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();

}

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

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

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

Documents

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