動画を撮影して分離ストレージに保存し、再生する

2012年1月16日(月)
PROJECT KySS

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
  • 「動画を撮影して分離ストレージに保存し、再生する」のサンプルファイル

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています