Silverlightでビデオ連続再生

メモです

Sliverlightを使った複数ビデオの連続再生、繰り返し再生 を行う方法を示します。

Silverlightの環境設定や作成の基本操作に関しては Sliverlightでhello HAL worldで説明しています。

 SilverligthでWEB画面上でビデオ再生

ブラウザでSilverlightが有効になっていると下にビデオ画面 と[Play]..[Next]のボタンがならびます。（無効の場合silverlightの インストールサイトへのリンクが出ます）

ビデオは２本で、いずれも車載カメラの映像で、ダッシュボードの反射に 関するものです。１つは反射防止処置を行っていないもの、もう一つは 反射防止処置をおこなったものです。
ハイビジョン撮影のものを480×270、500kbpsでwmvに落として あります。
２本のビデオは連続し、繰り返し再生されます。[next]で次のビデオ に飛ぶことができます。

これはVisualStudioで作成したSilverlightプログラム(Video1.xap) を次の記述ではめ込んでいます。

<object width="480" height="300"
    data="data:application/x-silverlight-2," 
    type="application/x-silverlight-2" >
    <param name="source"  value="../../../xap_wmv/Video1.xapp"/>
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
       style="text-decoration:none">
    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
       alt="Microsoft Silverlight を入手" style="border-style:none"/></a>
</object>

 MainPage.xaml

MainPage.xamlのxaml記述中にある<Grid></Grid>間に 表示オブジェクトを配置します。
ここではコンテナStackPanelを２段構えにして、ビデオ画面"MediaElement" と、一列にならんだ複数のボタンを構成しています。
MediaElementにはビデオ終了イベント(MediaEnded)をmedia_end関数に 通知する設定を行っています。

<UserControl x:Class="Video1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="300">
  <Grid x:Name="LayoutRoot">
     <StackPanel Orientation="Vertical">
        <!-- Source="hansha_short.wmv" -->
        <MediaElement x:Name="media" AutoPlay="false"
                      MediaEnded="media_end"
                      HorizontalAlignment="Left" VerticalAlignment="Top"
                      Width="480" Height="270" Stretch="Fill"/>
        <StackPanel Orientation="Horizontal">
            <Button Content="Play" Click="play_clicked"/>
            <Button Content="Pause" Click="pause_clicked"/>
            <Button Content="Stop" Click="stop_clicked"/>
            <Button Content="Next" Click="media_end"/>
        </StackPanel>  
     </StackPanel>
  </Grid>
</UserControl>

 MainPage.xaml.cs

ここでは簡略化のためビデオは文字列の配列で指定しています。
注意点としては、AutoPlayを設定しておかないと、ロード時に再生可能になった 時点でPlayすることができないことです。Source設定直後にPlay()を読んでも 有効ではありません。（Play可能となったイベントを拾う必要があります）

namespace Video1 {
   public partial class MainPage : UserControl {
      private int count = 0;
      private string[] videos = { "hansha_short.wmv", "no_hansha_short.wmv" };
      public MainPage() {
         InitializeComponent();
         media.Source = new Uri(videos[count], UriKind.Relative);
         count = (count + 1) % 2;
         }
      private void play_clicked(object sender
                                  , RoutedEventArgs r_event) {
         media.AutoPlay = true;
         media.Play();
         }
      private void pause_clicked(object sender
                            , RoutedEventArgs r_event) {
         media.Pause();
         }
      private void stop_clicked(object sender
                      , RoutedEventArgs r_event) {
         media.Stop();
         media.Position = new TimeSpan(0);
         }
      private void media_end(object sender
                            , RoutedEventArgs r_event) {
         media.Stop();
         //media.AutoPlay = true;
         media.Source=new Uri(videos[count], UriKind.Relative);
         media.Position = new TimeSpan(0);
         media.Play();
         count = (count + 1) % 2;
         }
      }
   }