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

第28回codeseek勉強会 WPF で簡単ビデオ再生2008年5月27日(火) 宇宙仮面 / C# MVP 2007.10 – 2008.10

第28回codeseek勉強会 AGENDA

Agenda WPFで簡単ビデオ再生 • 自己紹介 • イントロダクション • MediaElement • MediaPlayer • 独立モードとクロックモード • ビデオキャプチャ • Q&A

GOAL 今日帰るときには・・・ • WPF のビデオの概要 • MediaElement の使い方、特徴を理解 • MediaPlayer の使い方、特徴を理解 • 簡単なビデオプレーヤーが作れる

第28回codeseek勉強会 自己紹介

自己紹介 なんで、そんなことしているの？ • 2000 ごろは、Java/Unix 系でした • Microsoft は嫌いだったので、2000-2002 ぐらいまで、Java/Unix 系でWeb Server を立てて、HPを作っていた。 • 日曜管理者なので、カーネルのメインテナンスに疲れ果てた。 • 少し金を払ってもいいから、楽にサーバーを運用したかったので、Windows 系に乗り換えた。 • Windows 系の開発をしたことがなかったので • Visual Studio 2002 C# Beta が出たので、触ってみた。 • すげー！！ • コミュニティ • いろいろな素晴らしい人と出会える。 • 面白い！理屈はいらないでしょ。

自己紹介 MVPを受賞したきっかけは？ • 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# 受賞

第28回codeseek勉強会 イントロダクション

WPF でビデオ・音声メディアを再生 MediaElement と MediaPlayer • WPF でビデオ・音声メディアを再生するには、MediaElement、またはMediaPlayerを使います。それぞれ特徴があるので、しっかり押さえておきたい。 • MediaElement は、WPFに統合されているので、アルファブレンディングや3D の表面にレンダリングも可能 • MediaPlayer には直接的なビジュアル表現がないので、レイアウト上は直接使えません。しかし、Windows Media Player ランタイムを起動する必要がないため、高速に起動できます。また、ビジュアル表現がないので、音声の再生にも適しています。

第28回codeseek勉強会 MediaElement

簡単なビデオ再生1 MediaElementにより、単純にビデオを再生 <Window xmlns="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>

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

簡単なビデオ再生2 Expression Blend によるWPF プロジェクトの自動生成 Expression Blend を使用してメディアを再生する WPF プロジェクトを簡単に作ることができます。 1. WMVなどのメディアをプロジェクトに追加する。 2. WMVファイルをダブルクリックするか、フォーム上に Drag & Drop する。

簡単なビデオ再生2 Expression Blend による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>

demo DEMO2Expression Blend による単純にビデオを再生

単純なビデオ再生3 Silverlight2 によるWPF プロジェクトの自動生成ストリーボードなしのシンプルな XAML が生成されます。 Silverlight2 では、まだ MediaTimeline がサポートされていません。 <UserControl xmlns="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>

demo DEMO3Silverlight2 によるビデオ再生

簡単なビデオ再生4 WPF コントロールの内部にビデオを埋め込む • MediaElement コントロールは System.Windows.UIElement クラスから継承されているので、他の UIElement コントロールを配置できるところであればどこでも配置できます。 • <Button Click="Button_Click"> • <MediaElement • x:Name="Test_wmv“ • LoadedBehavior="Manual” • Source="Test.wmv" • Stretch="Fill“ /> • </Button> • ----------- • // C# 再生用コード • this.Test_wmv.Play();

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

簡単なビデオ再生5 プログレスバーの表示 • 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>

簡単なサンプル5 プログレスバーの表示 • C# 実装部分 • private void Storyboard_CurrentTimeInvalidated(…) { • this.progressBar1.Value = myMedia.Position.TotalMilliseconds; • } • private void myMedia_MediaOpened(...){ • this.progressBar1.Maximum = myMedia.NaturalDuration.TimeSpan.TotalMilliseconds; • }

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

簡単なビデオ再生6 再生、停止、一時停止、再生位置の変更、ボリュームの変更、再生スピードの調整注意：メディアを対話的に停止、一時停止、および再生できるようにするには、 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;

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

MediaElement 使用時の注意 再生時の遅延対策 MediaElement を使用した場合、Windows Media Player ランタイムを起動する必要があるため、メディアを最初に再生するときに、遅延が生じる場合があります。このため、メディアファイルとユーザーイベントやアニメーションと正確に同期を取って再生することができません。対策 1. メディアファイルを事前に読み込み、使用準備が整うまで一時停止状態にしておく。 2. <Storyboard SlipBehavior="Slip"> を指定します。すると、メディアの再生が開始するまで、アニメーションが停止してくれます。

簡単なビデオ再生6 ビデオを 3D の表面にマップする ModelVisual3D の中で、VisualBrush の MediaElement ソースにメディアファイルを指定します。 <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <VisualBrush> <VisualBrush.Visual> <MediaElement Source="Test.wmv" /> </VisualBrush.Visual> </VisualBrush> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material>

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

第28回codeseek勉強会 MediaPlayer

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

MediaPlayer によるメディアの再生 主なプロパティ MediaPlayerのプロパティや、イベントを設定することにより、たとえば次のような操作が可能です。メディアファイルの位置を取得または設定 Position プロパティに TimeSpan オブジェクトを設定します。例バッファリングの進行状況 BufferingProgress プロパティ再生の進行状況 DownloadProgress プロパティオーディオコントロール Balance プロパティ、 Volume プロパティを設定メディアの開始を知る MediaOpened イベントメディアの終了を知る MediaEnded イベント

音楽を再生する ビデオを 3D の表面にマップする 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); }

ビデオを再生する MediaPlayer, DrawingBrush を使って、ビデオをコントロールに描画する <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 を使って、ビデオをコントロールに描画する C# 実装部分 void OnClick1(object sender, RoutedEventArgs e) { MediaPlayer MyPlayer = new MediaPlayer(); MyPlayer.Open(new Uri(@“..\..\Test.wmv”, UriKind.Relative)); MyVideoDrawing.Player = MyPlayer; MyPlayer.Play(); }

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

ウェットフロア 2つのビジュアルに同時プレイ

ウェットフロア C# 実装部分 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(); }

demo DEMO９MediaPlayerウェットフロア

第28回codeseek勉強会 独立モードとクロックモード

独立モードとクロックモードとは 独立モードとクロックモード MediaElement、および MediaPlayer は、独立モードとクロックモードの2つのモードがあります。通常の再生だけであれば、独立モードで OK です。独立モード <MediaElement Source="Test.wmv" Width="320" Height="240" LoadedBehavior="Play"/> クロックモード Expression Blend で、メディアを追加した場合、クロックモードで WPF が生成されます。

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

クロックモード Clock が Null ではない場合 MediaElement は、MediaTimeline によって、メディアの再生が実行されます。特徴 - メディアの Uri は、MediaTimeline を通じて間接的に設定されます。 - メディアの再生をクロックで制御できます。メディアオブジェクトのコントロールメソッドは使用できません。 Expression Blend で、メディアを追加した場合、クロックモードで WPF が生成されます。 ClockController プロパティを使用すれば、対話形式でクロックを開始、一時停止、再開、シーク、区間の最後までの前進、停止ができます。

クロックモード クロックモード 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(); }

demo DEMO 10クロックモード

第28回codeseek勉強会 ビデオキャプチャ

ビデオキャプチャ <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" />

ビデオキャプチャ C# 実装部分 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); } } }

demo DEMO 11ビデオキャプチャ

Resources 宇宙仮面の C# http://uchukamen.com WPF を使ってコントロールと 3D の表面にビデオを追加する http://msdn.microsoft.com/ja-jp/magazine/cc163455.aspx MSDN MediaElement クラス http://msdn.microsoft.com/ja-jp/library/system.windows.controls.mediaelement.aspx

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