動画を撮影して分離ストレージに保存し、再生する
2012年1月16日(月)

VideoPlayPage.xamlの編集とコントロールの配置
x:NameがPageTitleというTextBlockのTextプロパティに「再生」と指定します。ツールボックスからMediaElementコントロールを1個、Buttonコントロールを2個配置します(図4)。
| 図4:各コントロールを配置した(クリックで拡大) |
書き出されたXAMLコードをリスト3のように編集します。
リスト3 編集したXAMLコード(VideoPlayPage.xaml)
(1)<MediaElement.RenderTransform>プロパティ要素内に、<CompositeTransform> 要素を配置します。CompositeTransformクラスは、1 つのオブジェクトに複数の異なる変換を適用することができるクラスです。CenterXとCenterYプロパティに、ビデオの表示される<MediaElement>要素のWidthとHeightの約半分のサイズを指定します。CenterXプロパティでは、CompositeTransform で指定された、全ての変換の中心点の x 座標を設定します。CenterYプロパティでは、CompositeTransform で指定された、全ての変換の中心点の y 座標を設定します。回転を表すRotationに90を指定します。ビデオはデフォルトでは横向きに再生されるため、90度回転して縦向きで再生されるようにしています。
<phone:PhoneApplicationPage
x:Class="WP7_VideoCapture.VideoPlayPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True" Language="ja-JP">
<!--LayoutRoot は、全てのページ コンテンツが配置されるルート グリッドです-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="再生" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 追加コンテンツをここに入力します-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<MediaElement Height="324" HorizontalAlignment="Left" Margin="10,69,0,0" Name="MediaElement1" VerticalAlignment="Top" Width="425">
<MediaElement.RenderTransform> ■(1)
<CompositeTransform Rotation="90" CenterX="212" CenterY="162"/> ■(1)
</MediaElement.RenderTransform> ■(1)
</MediaElement>
<Button Content="再生" Height="84" HorizontalAlignment="Left" Margin="57,449,0,0" Name="playButton" VerticalAlignment="Top" Width="131" />
<Button Content="休止" Height="84" HorizontalAlignment="Left" IsEnabled="True" Margin="262,449,0,0" Name="pauseButton" VerticalAlignment="Top" Width="129" />
</Grid>
</Grid>
~コード略~
</phone:PhoneApplicationPage>
次に、VideoPlayPage.xamlを展開して表示される、VideoPlayPage.xaml.vbをダブルクリックしてリスト4のコードを記述します。
ロジックコードを記述する
リスト4 (VideoPlayPage.xaml.vb)
Option Strict On
仮想ファイルシステムを作成および使用するための型が含まれている、System.IO.IsolatedStorage名前空間をインポートします。分離ストレージによって、安全なクライアント側のストレージが提供されます。
Imports System.IO.IsolatedStorage
Partial Public Class VideoPlayPage
Inherits PhoneApplicationPage
Public Sub New()
InitializeComponent()
End Sub
ページがアクティブになった時の処理
分離ストレージ内のファイルを表すIsolatedStorageFileStreamクラス用オブジェクト変数isolate変数を用意し、sample.mp4ファイル、指定したモード、指定したファイルへのアクセス、指定した種類のアクセスを提供する IsolatedStorageFileStream クラスの新しいインスタンスを初期化します。
MediaElementのSetSourceプロパティにファイル名やモードで初期化されたisolateオブジェクトを指定します。これで、ページに入った時点で、ビデオが再生されます。[再生]ボタンの使用は不可となっています。
Protected Overrides Sub OnNavigatedTo(e As System.Windows.Navigation.NavigationEventArgs)
Dim isolate As New IsolatedStorageFileStream("sample.mp4", IO.FileMode.Open, IO.FileAccess.Read, IsolatedStorageFile.GetUserStoreForApplication())
MediaElement1.SetSource(isolate)
playButton.IsEnabled = False
MyBase.OnNavigatedTo(e)
End Sub
[休止]ボタンがタップされた時の処理
Pauseメソッドでビデオを休止します。[再生]ボタンの使用を可能とします。[休止]ボタンの使用を不可とします。
Private Sub pauseButton_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles pauseButton.Click
MediaElement1.Pause()
playButton.IsEnabled = True
pauseButton.IsEnabled = False
End Sub
[再生]ボタンがタップされた時の処理
Playメソッドでビデオを再生します。[再生]ボタンの使用を不可とします。[休止]ボタンの使用を可能とします。
Private Sub playButton_Click(sender As Object, e As System.Windows.RoutedEventArgs) Handles playButton.Click
MediaElement1.Play()
playButton.IsEnabled = False
pauseButton.IsEnabled = True
End Sub
ビデオが最後まで再生された時の処理
[休止]ボタンの使用を不可とし、[再生]ボタンの使用を可能とします。
Private Sub MediaElement1_MediaEnded(sender As Object, e As System.Windows.RoutedEventArgs) Handles MediaElement1.MediaEnded
pauseButton.IsEnabled = False
playButton.IsEnabled = True
End Sub
End Class
「動画を撮影して分離ストレージに保存し、再生する」のサンプルファイル
連載バックナンバー
Think ITメルマガ会員登録受付中
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。


