動画コンテンツを再生するSilverlightアプリケーションの作成

ComponentOne StudioのMediaPlayer for Silverlightを使ったWebページの作成

Webページの作成

今回作成するWebページの構成

　では、さっそくWebページを作成してみましょう。今回のプログラムでは、グリッドを使ってImageコントロールとC1MediaPlayerコントロールを配置します。画像と動画コンテンツは、別のWebサーバにリンクを貼って表示します。

コントロールのレイアウト

Silverlightプロジェクトの作成

　まずは、Silverlightプロジェクトの作成からです。

1. Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクトを作成すると、「プロジェクトの種類」に［Silverlight］が追加されています。これを選択し、「テンプレート」から［Silverlightアプリケーション］を選びます。
   「Silverlightアプリケーション」を選ぶ

   
2. 「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」のリストから［ASP.NET Webサイト］を選びます。
   リストから［ASP.NET Webサイト］を選ぶ

   
3. プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られ、XAMLのコードが表示されます。

グリッドの作成

　今回は、2行1列のグリッドを設定します。

　グリッドに行を追加するには、RowDefinitionsコレクションのRowDefinitionオブジェクトを、必要な行数分定義します。高さはHeightプロパティで指定します。

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="130" />
        <RowDefinition Height="350" />
    </Grid.RowDefinitions>
</Grid>

グリッドの設定（※ ShowGridLines="True"にして枠線を見えるようにしている）

Imageコントロールの作成

　ツールボックスにあるImageコントロールを、今配置したGrid.RowDefinitions要素の下にドラッグ＆ドロップします。<Image>要素が作成されるので、グリッドの1段目の行（Grid.Row="0"）を指定し、Sourceプロパティで画像のURLを指定します。また、グリッド内の水平位置と垂直位置も指定します。

</Grid.RowDefinitions>
<Image Grid.Row="0" Width="100" Height="100" Source="http://www.big.or.jp/~seto/film.jpg" 
       HorizontalAlignment="Left"   VerticalAlignment="Center"></Image>
<Image Grid.Row="0" Width="400" Height="80" Source="http://www.big.or.jp/~seto/logo.jpg"
       HorizontalAlignment="Center" VerticalAlignment="Center"></Image>

C1MediaPlayerコントロールの作成

　C1MediaPlayerコントロールを作成する前に、テーマを作成します。

1. Image要素の下に、ツールボックスから「C1ThemeShinyBlue」をドラッグ＆ドロップし、2段目のグリッド（Grid.Row="1"）を指定します。

   <Image Grid.Row="0" Width="400" Height="80" Source="http://www.big.or.jp/~seto/logo.jpg"
                HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
   <my:C1ThemeShinyBlue Grid.Row="1">
   
   </my:C1ThemeShinyBlue >
   

2. C1ThemeShinyBlueの中に、C1MediaPlayerコントロールをツールボックスからドラッグ＆ドロップします。名前を「C1MediaPlayer」とし、サイズを指定します。

   <my:C1ThemeShinyBlue Grid.Row="1">
   	<c1mediaplayer:C1MediaPlayer x:Name="C1MediaPlayer" Height="300" Width="350">
       </c1mediaplayer:C1MediaPlayer>
   </my:C1ThemeShinyBlue >
   

3. C1MediaPlayerコントロールの中に、C1MediaItemオブジェクトを作成します。これが、再生するビデオコンテンツになります。MediaSourceプロパティにコンテンツのURLを設定し、Titleプロパティでタイトルを設定します。

   <c1mediaplayer:C1MediaItem x:Name="media0" 
                              MediaSource="http://www.big.or.jp/~seto/sample.wmv"
                              Title="mimi">
   

4. そして、C1MediaPlayerの要素の下に、C1MediaChapterオブジェクトを作成します。これがチャプターになります。チャプターは、Positionプロパティで開始位置を再生時間で指定し、Titleプロパティでチャプターのタイトルを付けます。今回のサンプルビデオは15秒と短いため、チャプターは1つしか作成していませんが、長いビデオの場合はいくつものチャプターを設定できます。その場合は、このC1MediaChapterオブジェクトをチャプターの数だけ作成します。

   	<c1mediaplayer:C1MediaChapter Position="00:00:10" Title="Chapter 1">
       </c1mediaplayer:C1MediaChapter>
   </c1mediaplayer:C1MediaItem>
   

5. 同じように、もう1つの動画ファイルをC1MediaItemオブジェクトで作成します。

   <c1mediaplayer:C1MediaItem x:Name="media1" 
                              MediaSource="http://www.big.or.jp/~seto/sample2.wmv"
                              Title="けんか">
   	<c1mediaplayer:C1MediaChapter Position="00:00:10" Title="Chapter 1">
       </c1mediaplayer:C1MediaChapter>
   </c1mediaplayer:C1MediaItem>
   

　これで自動的にアイテムリストとチャプターリストが作成され、それぞれプレーヤーのボタンをクリックすることで選択できます。

XAML全文

<UserControl xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"  xmlns:my1="clr-namespace:C1.Silverlight.Theming.ShinyBlue;assembly=C1.Silverlight.Theming.ShinyBlue"  xmlns:my="clr-namespace:C1.Silverlight.Theming.WhistlerBlue;assembly=C1.Silverlight.Theming.WhistlerBlue"  xmlns:c1mediaplayer="clr-namespace:C1.Silverlight.MediaPlayer;assembly=C1.Silverlight.MediaPlayer"  x:Class="sl_mplayer_vb.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="Auto" d:DesignHeight="Auto">
  
<Grid x:Name="LayoutRoot">
      
      <Grid.RowDefinitions>
          <RowDefinition Height="130" />
          <RowDefinition Height="350" />
      </Grid.RowDefinitions>

      <Image Grid.Row="0" Width="100" Height="100" Source="http://www.big.or.jp/~seto/film.jpg" 
             HorizontalAlignment="Left"   VerticalAlignment="Center"></Image>
      <Image Grid.Row="0" Width="400" Height="80" Source="http://www.big.or.jp/~seto/logo.jpg"
             HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
      <my1:C1ThemeShinyBlue Grid.Row="1">
          <c1mediaplayer:C1MediaPlayer x:Name="C1MediaPlayer" Height="300" Width="350">
              <c1mediaplayer:C1MediaItem x:Name="media0" 
                                         MediaSource="http://www.big.or.jp/~seto/sample.wmv"
                                         Title="mimi">
                  <c1mediaplayer:C1MediaChapter Position="00:00:10" Title="Chapter 1">
                  </c1mediaplayer:C1MediaChapter>
              </c1mediaplayer:C1MediaItem>
              <c1mediaplayer:C1MediaItem x:Name="media1" 
                                         MediaSource="http://www.big.or.jp/~seto/sample2.wmv"
                                         Title="けんか">
                  <c1mediaplayer:C1MediaChapter Position="00:00:10" Title="Chapter 1">
                  </c1mediaplayer:C1MediaChapter>
              </c1mediaplayer:C1MediaItem>
          </c1mediaplayer:C1MediaPlayer>
      </my1:C1ThemeShinyBlue>

  </Grid>
</UserControl>

まとめ

　動画コンテンツは、商品説明などさまざまな場面で利用されますが、プラグインのMediaPlayerなどでは、チャプターの作成やコンテンツのリストなどが作成できないため、いまいち応用性に欠けています。

　C1MediaPlayerコントロールは、プロパティ設定で簡単にチャプター・コンテンツリストの作成が行え、ループ再生もできるので、使い勝手のよいものになっています。Webページに動画を使おうというときには、お勧めのコントロールでしょう。

参考文献

• Microsoft Silverlightデベロッパーセンター

製品情報

• ComponentOne Studio