SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

Webページの作成

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

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

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

Silverlightプロジェクトの作成

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

  1. Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクトを作成すると、「プロジェクトの種類」に[Silverlight]が追加されています。これを選択し、「テンプレート」から[Silverlightアプリケーション]を選びます。
    「Silverlightアプリケーション」を選ぶ
    「Silverlightアプリケーション」を選ぶ
  2. 「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」のリストから[ASP.NET 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"にして枠線を見えるようにしている)
グリッドの設定(※ ShowGridLines=

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ページに動画を使おうというときには、お勧めのコントロールでしょう。

参考文献

製品情報

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5456 2010/09/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング