silverlight で...

MIX essentials. “Silverlight Day”S-2「Silverlightでメディア配信をはじめよう」

1

Silverlight でメデゖゕ配信をはじめよう- メデゖゕプレヤー実装のロハ

マイクロソフト株式会社デベロッパー＆プラットフォーム統括本部デザイナー製品部Silverlightテクニカルマネージャ

大西彰http://blogs.msdn.com/aonishi/

Agenda

• Silverlightにおけるメデゖゕ機能とは

• メデゖゕプレヤー実装：入門編• Expression Encoder 2

• Silverlight Streaming

• メデゖゕプレヤー実装：初級編• Expression Blend 2とJavaScriptで開発

• Expression Blend 2.5 PreviewとC#で開発

• メデゖゕプレヤー実装：中級編• サーバ連携による字幕機能

• Silverlight 2の注目トピック• Silverlight DRM

• まとめ


2

セッションの流れ

• 基本は、「デモで学ぶSilverlight」

デモポイント

解説

次の

ステップ

質問は、Ask The Speakerで

あるいはMSDNフォーラムへhttp://forums.microsoft.com/MSDN-JA/default.aspx?ForumGroupID=509&SiteID=7

そもそもSilverlightとは？

• 主要ブラウザに対応する軽量なプラグイン

• 動画/音楽/アニメーションなどのリッチメデゖゕの配信や、RIAを実現することができるプレゼンテーション層のテクノロジ

• クロスプラットフォーム（Win/Mac/Linux）、クロスブラウザ（IE/Firefox/Safari)で動作


3

事例で見るSilverlightのパワー

論より証拠メデゖゕ配信・DRMコンテンツ配信

demo

メデゖゕの利用シナリオ企業

オンデマンドトレーニング

経営者による生中継による放送

定期的な社内放送プログラム

企業Webサイトによる製品プロモーション

ンターネット (通常、広告との組み合わせ)SNSサイトにおける動画

映画の予告編

ニュース・エンターテインメントの映像集

音楽・映画のサービス (視聴契約/PPV)

事前に計画されたインターネットラジオやTV

ラジオやテレビの再放送

生中継によるWebキャスト


4

メデゖゕエコシステム

ソースエンコーダーサーバークラゕント

7.0

+ IIS Media Pack

Silverlightにおけるビデオとオーデゖオ

• Windows Mediaを利用

• 世の中で最も使われているメディア技術

• ランタムのみでメデゖゕ機能の実現

• OS搭載のコーデックと無関係

• ビデオコーデック

• WMV 7/8/9とWMV 9 Advanced Profile(VC-1)

• オーデゖオコーデック

• Windows Media Audio (Silverlight 1.0)

• Windows Media Audio Pro (Silverlight 2より)

• 32から96kbpsにおいて圧縮効率２倍

• MP3 もサポート将来H.264/AACに対応


5

Expression Encoder 2を使ってメデゖゕプレヤーを作ろう

少ない操作で豊富な機能素材の取り込み

テンプレートを選択

demo

手軽にビデオ再生するためには

• Expression Encoder 2のテンプレートを利用


6

Expression Encoder 2だと字幕も簡単

Expression Encoder 2のテンプレートを

Expression Blend 2でカスタマズしよう

独自のスキン実装に向けた第一歩

demo


7

テンプレートのカスタマズステップ１：コピーを編集

2008/11/25

テンプレートのカスタマズステップ２：Expression Blend 2で作業


8

テンプレートのカスタマズステップ３：Expression Encoder 2から利用

Expression Encoder 2で作ったメデゖゕプレヤーを

Silverlight Streamingを使いンターネットに発信しよう

自前でサーバを持たなくても高品質なビデオ配信ができる!

demo


9

Silverlight Streamingでンターネットに展開• Windows Liveが提供する無償のサービス

• 容量は1アカウントあたり10GB

• 1ビデオあたり105MB/10分以内最高1.4Mbpsのビデオ配信

Silverlight Streamingのゕカウントを入手しよう• 必要なもの

• インターネットへのアクセス環境

• PCとブラウザ

• Windows Live ID

• URL• http://silverlight.live.com/account/create.aspx


10

Expression Encoder 2からの発行

パブリッシュの設定

Silverlight Streamingの

Account

Silverlight StreamingのKey

エンコード終了時に自動アップロード

Keyを保存し新しいジョブからも利用


11

Silverlight StreamingからWebサトへ

<方法１>iframeでの貼り付け

＜方法２＞Liveコントロール

での貼り付け

利用例：Windows Live Spaceに展開

<iframe src=http://silverlight.services.live.com/invoke/34502/xEncoderApp8/iframe.html

scrolling="no" frameborder="0" style="width:500px; height:400px"></iframe>


12

Expression Blend 2を使ってメデゖゕプレヤーを作ろう

その１Blend 2で画面作成すぐにテスト実行

demo

メデゖゕ再生の最重要ポント

• 鍵はMediaElementにあり<MediaElement Source=“<メディアのファイル名>” />

• 何十人もの開発者の努力がこの１つのタグに集約

• HTTP通信によるWeb上のメデゖゕの参照• プログレッシブダウンロード

• Silverlight Streaming

• Windows Media Serverストリーミング

詳細は「サポートされるメデゖゕ形式とプロトコル」http://msdn.microsoft.com/ja-jp/library/cc189080(VS.95).aspx


13

Expression Blend 2を使ってメデゖゕプレヤーを作ろう

その２Blend 2で画面・ゕニメーション作成

Visual Studio 2008でJavaScript記述

demo

MediaElementオブジェクトの主要なプロパテゖ• プロパティ

• AutoPlay : 自動再生を有効にする (True/False)

• Balance : 左右の音声バランス (-1 から 1)

• CurrentState : メディアの状態

• IsMuted : 消音状態 (True/False)

• Markers : メディアに対応するマーカ

• Position : メディアの再生で経過した時間

• Source : メディアのソース

• Volume : 再生時の音量 (0から1)


14

MediaElementオブジェクトの主要なメソッド• AddEventListener : イベントハンドラのマップ

• Pause : 一時停止

• Play : 再生

• Stop : 停止

MediaElementオブジェクトの主要なベント• CurrentStateChanged : メディア状態の変更

• MarkerReached : メディアマーカへの到達

• MediaEnded : メディア再生の終了

• MediaOpened : メディアが再生可能状態

• MediaFailed : メディアが再生不能状態


15

Blend 2での作業 MediaElement

x:Name=“MyVideo” Source=“Butterfly.wmv”

Rectangle

x:Name=“MyButton”

Blend 2での作業（続き）

キーフレームの記録


16

Expression Blend 2.5 Previewを使って

メデゖゕプレヤーを作ろうC#で簡単にやってみる

demo

※ 2008/10/31にExpression Blend 2 SP1として日本語版がリリースされました

字幕機能付きのメデゖゕプレヤーを作ろう

サーバ側との連携AJAXの利用

demo


17

メデゖゕマーカをどんどん使っていこう• MarkerReachedベント

• eventArgs.marker は、TimelineMarkerのオブジェクト

• TimelineMakerオブジェクト• Time : マーカの位置 (メディアの先頭からの経過時間)

• Text : マーカに対応するテキスト

• Type: Scriptコマンドの場合にマーカの種別を表すもの

function myVideo_MarkerReached(sender, eventArgs)

{

var marker = eventArgs.marker;

if (marker.Type == "CC")

{

_txtClosedCaption.Text = eventArgs.marker.Text;

}

}

<アプリケーション>

AJAXにおけるシナリオ

<クライアント環境>SilverlightとWebブラウザ

<Webサーバ>IIS + ASP.NET AJAX

Default.aspx MyService.asmx

Page.xaml

CreateSilverlight.js

Silverlight.js

ScriptManager

データベース

OtherWeb

Services

Webサービス

<JSON Proxy>MyService

Event handlersイベントハンドラ

Event handlers By JavaScript

JavaScriptのイベントハンドラ


18

Silverlight DRMを使ってみる

demo

メデゖゕの暗号化Silverlight 2による再生

Silverlight DRMソリューション概要<WWW>

ライセンス発行サーバ

<Browser>SL2アプリ

<Media>コンテンツ

１：コンテンツ取得

３：ライセンス要求

４：ライセンス送出

ライセンス

Windows Server 2003/2008

IIS + ASP.NET

rightsmanager.asmx

Silverlight 2

PlayReadyクライアント

MediaElement

５：復号化

６：再生

ライセンス発行プラグイン(dll)

コンテンツクラウド

<Media>コンテンツ<Media>

コンテンツ<Media>コンテンツ

０．コンテンツのパッケージング

<WWW>Indiv Server

DRM有効化

２：個別化


19

同一のIIS環境

Silverlight DRMとWMP/WM RMの共存

コンテンツクラウド

<Media>コンテンツ<Media>

コンテンツ<Media>コンテンツ

<Desktopアプリケーション>Windows Media Player

<Classic ASP>WM RM

ライセンスサーバ

http://foo.net/wm/...

<ASP.NET>PlayReadyライセンス

サーバhttp://foo.net/pr/rightsmanager.as

mx

<Webアプリケーション>Silverlight 2アプリ

(1)

(2)

既存コンテンツの書き換えは不要

まとめ• Silverlight 2のメディアシナリオの主なポイント

• MediaElementを使うだけでメディア再生が可能

• TimelineMarkerによるメディアとの同期イベント

• Silverlight DRMによるコンテンツ保護

• 開発ツール・デザインツール• Expression Blend 2

• Expression Encoder 2

• Visual Studio 2008

• メディアアプリケーションの展開• 独自サーバをもたない場合: Silverlight Streaming

• 独自のサーバ

• Windows Server 2008

• IIS 7

• Windows Media Services 2008


20

関連リソース

• Silverlightドキュメントhttp://msdn.microsoft.com/ja-jp/library/aa155110.aspx

• Silverlight Streamingについてhttp://msdn.microsoft.com/ja-jp/library/bb851610.aspx

• Expression Blendを使ったSilverlight QuickStarthttp://silverlight.net/japan/blend_quickstart/default.aspx

• 「Silverlightではじめるメデゖゕ配信」MSDNオフランセミナーの講演資料公開http://blogs.msdn.com/aonishi/archive/2008/09/25/8964977.aspx

ありがとうございました

http://msdn.microsoft.com/ja-jp/library/aa155110.aspx



http://msdn.microsoft.com/ja-jp/library/bb851610.aspx



http://silverlight.net/japan/blend_quickstart/default.aspx

http://blogs.msdn.com/aonishi/archive/2008/09/25/8964977.aspx


21

Appendix参考にしていただければ幸いです

ストリーミングプログレッシブダウンロード

メデゖゕ配信の仕組み２通りの方法

すべてのデータのダウンロード不要再生に必要なデータのみ転送専用のサーバが必要ライブ中継が可能

すべてのデータのダウンロードダウンロードしながら再生一般のWebサーバで十分オンデマンドビデオ


22

メデゖゕ配信の仕組みストリーミング

Describe abc.wmv

Header ResponseHeader

S

1

S

2

S

3

abc.wmv

Header

Setup abc.wmv Stream 2 & 3

Setup Response

Play abc.wmv

Play Response

S2: Sample 3... Sample 2... Sample 1

S3: Sample 3... Sample 2... Sample 1

ストリーミング

多くのメディア機能に対応

サーバ側再生リスト

帯域幅の最適化

管理用のインフラが必要

特定のメディア形式とプレイヤーに強く依存


23

メデゖゕ配信の仕組み標準のプログレッシブダウンロード

Get abc.wmv

200 OK

abc.wmv

標準のプログレッシブダウンロード

管理と構成が簡単

サーバ資源の低い使用率

セキュリティで保護されたSSL通信のサポート

標準のWebクライアントのサポート

標準のファイアフォール、キャッシュ、プロキシに対応

“Send and forget”モデルは最大限の帯域を消費

上位のメディアストリーミングの機能に未対応

・生放送

・早送り・巻きもどし

保護されたコンテンツに対する再生リストの仕組み無し


24

Silverlightのゕーキテクチャ

Sample Fill

Input

MediaUI Core

XAML

Browser API

JavaScript

Engine

Download

APIS

Silverlight 1.0

(2007年)

Silverlight 2

(2008年中)

Web

Browser

Managed Code UI Framework

JavaScript APIで操作する方法

• Silverlight 1.0/2それぞれに利用可能な方法

• Expression Blend 2とVisual Studio 2008

Input

MediaUI Core

XAML

Browser API

JavaScript

Engine

Download

APIs

default.html

createSilverlight()イベントハンドライベントハンドライベントハンドラ

オブジェクトの参照


25

JavaScript APIで開発するSilverlightゕプリケーションの構成要素• Silverlight用スクリプトラブラリ

– Silverlight.js (Silverlight SDKに付属)

– createSiverlight.js (アプリケーションに応じて作成）

– XAMLフゔル

– Silverlight用の画面を構成する要素を定義

– HTML文書

– スクリプトライブラリの取り込み

– Silverlightプラグインの表示領域を決める

– Silverlightプラグインを実行する

• JavaScriptのコード

– SilverlightとHTMLを組み合わせる

文字だけだと、

想像しづらいかも

図で表すと

<アプリケーション>

default.html

Page.xaml

CreateSilverlight.js

Silverlight.jsEvent handlers

By JavaScriptEvent handlers

By JavaScript

<リソース>

<ダウンロード>

v1.wmv

<ストリーミング>

v2.wmv


image1.jpg


image2.png


s1.mp3

インターネットクラウド

S Input

MediaUI Core

XAMLBrowser API

JavaScript

Engine

Download

APIS

<Silverlight 2 実行環境>


x1.xaml


26

Blend2で作ったXAMLの例<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="640" Height="480"

Background="White"

x:Name="Page">

<Canvas.Resources>

<Storyboard x:Name="MyStory">

<DoubleAnimationUsingKeyFrames BeginTime=“00:00:00” Storyboard.TargetName=“MyVideo”

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-173" KeySpline="1,0.16,0.122,0.31"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MyVideo" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">


<SplineDoubleKeyFrame KeyTime="00:00:02" Value="86" KeySpline="1,0.16,0.122,0.31"/>


</Storyboard>

</Canvas.Resources>

<Rectangle Width="216" Height="92" Fill="#FFDAF117" Stroke="#FF000000" Canvas.Left="17" Canvas.Top="365" RadiusX="32" RadiusY="32" x:Name="MyButton" Cursor="Hand"/>

<MediaElement AutoPlay="False" Width="601" Height="344" Canvas.Left="17" Canvas.Top="17" x:Name="MyVideo" Source="Butterfly.wmv" Stretch="Fill" RenderTransformOrigin="0.5,0.5">

<MediaElement.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</MediaElement.RenderTransform>

</MediaElement>

</Canvas>

Page.xaml.jsにJavaScriptで記述するコード例if (!window.Demo20080919_001)

Demo20080919_001 = {};

Demo20080919_001.Page = function() {}

Demo20080919_001.Page.prototype ={

handleLoad: function(control, userContext, rootElement) {this.control = control; // Silverlightのプラグインの参照// XAMLにつけた名前(x:Name)を使ってオブジェクトへの参照を作るthis.MyVideo = control.content.findName(“MyVideo”); // ビデオthis.MyButton = control.content.findName(“MyButton”); // ボタンとしての矩形this.MyStory = control.content.findName(“MyStory”); // ストーリーボード

this.MyButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));

},

// イベントハンドラhandleMouseDown: function(sender, eventArgs) {

this.MyVideo.Play(); // MediaElement.Play()ビデオの再生this.MyStory.Begin(); // Storyboard.Begin() アニメーションの開始

}}


27

.NETでコンパルした場合の構成

• HTMLファイル (objectタグを利用）

• XAPファイル (ZIP形式の圧縮ファイル)

• 中身

• AppManifest.xml

• DLLファイル

JavaScript APIと異なり、・XAMLのデザイン内容・記述したロジックを他者に読み取られることがない

Blend2.5 Previewで作ったXAMLの例<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml” x:Class="SLDay_demo001.Page” Width="640" Height="480">

<UserControl.Resources>

<Storyboard x:Name="MyStory">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MyObject"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">




</Storyboard>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" >

<MediaElement Margin="8,8,249,179" x:Name="MyVideo" Source="cnt0064717_0768.wmv" AutoPlay="False"/>

<Button Height="32" HorizontalAlignment="Left" Margin="8,0,0,143" VerticalAlignment="Bottom" Content="再生" Width="121" x:Name="PlayButton"/>

<Button Height="32" HorizontalAlignment="Left" Margin="142,0,0,143" x:Name="PauseButton" VerticalAlignment="Bottom" Width="121" Content="一時停止"/>

<Button Height="32" HorizontalAlignment="Stretch" Margin="270,0,249,143" x:Name="StopButton" VerticalAlignment="Bottom" Content="停止"/>

<Rectangle Height="26" HorizontalAlignment="Stretch" Margin="290,47,260,0" VerticalAlignment="Top" Stroke="#FF000000"

RadiusX="35" RadiusY="35" x:Name="MyObject" RenderTransformOrigin="0.5,0.5">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform/><SkewTransform/><RotateTransform/> <TranslateTransform/>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="1.11300003528595,0.34799998998642">

<GradientStop Color="#FF000000"/>

<GradientStop Color="#FFF5B910" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Grid>

</UserControl>


28

Page.xaml.csにC#で記述するコード例namespace SLDay_demo001

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

PlayButton.Click += new RoutedEventHandler(PlayButton_Click);

PauseButton.Click += new RoutedEventHandler(PauseButton_Click);

StopButton.Click += new RoutedEventHandler(StopButton_Click);

MyStory.RepeatBehavior = RepeatBehavior.Forever;

}

void StopButton_Click(object sender, RoutedEventArgs e)

{

MyVideo.Stop();

MyStory.Stop();

}

void PauseButton_Click(object sender, RoutedEventArgs e)

{

MyVideo.Pause();

MyStory.Pause();

}

void PlayButton_Click(object sender, RoutedEventArgs e)

{

MyVideo.Play();

MyStory.Begin();

}

}

}

56

silverlight で...

Documents