Silverlightでメディア配信をはじめよう

Size: px

Start display at page:

Download "Silverlightでメディア配信をはじめよう"

ありさきせんばる
4 years ago
Views:

1 Silverlight でメデゖゕ配信をはじめよう - メデゖゕプレヤー実装のロハマイクロソフト株式会社デベロッパープラットフォーム統括本部デザイナー製品部 Silverlightテクニカルマネージャ大西彰 Agenda Silverlightにおけるメデゖゕ機能とはメデゖゕプレヤー実装入門編 Expression Encoder 2 Silverlight Streaming メデゖゕプレヤー実装初級編 Expression Blend 2とJavaScriptで開発 Expression Blend 2.5 PreviewとC#で開発メデゖゕプレヤー実装中級編サーバ連携による字幕機能 Silverlight 2の注目トピック Silverlight DRM まとめ 1

forumgroupid=509&siteid=7 そもそもSilverlightとは主要ブラウザに対応する軽量なプラグイン

2 セッションの流れ基本はデモで学ぶSilverlight デモポイント次の解説ステップ質問は Ask The SpeakerであるいはMSDNフォーラムへそもそもSilverlightとは主要ブラウザに対応する軽量なプラグイン動画/音楽/アニメーションなどのリッチメデゖゕの配信や RIAを実現することができるプレゼンテーション層のテクノロジクロスプラットフォーム Win/Mac/Linux クロスブラウザ IE/Firefox/Safari)で動作 2

3 demo 事例で見るSilverlightのパワー論より証拠メデゖゕ配信 DRMコンテンツ配信メデゖゕの利用シナリオ企業オンデマンドトレーニング経営者による生中継による放送定期的な社内放送プログラム企業Webサイトによる製品プロモーションンターネット (通常広告との組み合わせ) SNSサイトにおける動画映画の予告編ニュースエンターテインメントの映像集音楽映画のサービス (視聴契約/PPV) 事前に計画されたインターネットラジオやTV ラジオやテレビの再放送生中継によるWebキャスト 3

4 メデゖゕエコシステムソースエンコーダーサーバークラゕント 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に対応 4

5 demo Expression Encoder 2を使ってメデゖゕプレヤーを作ろう少ない操作で豊富な機能素材の取り込みテンプレートを選択手軽にビデオ再生するためには Expression Encoder 2のテンプレートを利用 5

6 Expression Encoder 2だと字幕も簡単 demo Expression Encoder 2のテンプレートを Expression Blend 2でカスタマズしよう独自のスキン実装に向けた第一歩 6

7 テンプレートのカスタマズステップ１コピーを編集テンプレートのカスタマズステップ２ Expression Blend 2で作業 2008/11/25 7

8 テンプレートのカスタマズステップ３ Expression Encoder 2から利用 demo Expression Encoder 2で作ったメデゖゕプレヤーを Silverlight Streamingを使いンターネットに発信しよう自前でサーバを持たなくても高品質なビデオ配信ができる! 8

9 Silverlight Streamingでンターネットに展開 Windows Liveが提供する無償のサービス容量は1アカウントあたり10GB 1ビデオあたり105MB/10分以内最高1.4Mbpsのビデオ配信 Silverlight Streamingのゕカウントを入手しよう必要なものインターネットへのアクセス環境 PCとブラウザ Windows Live ID URL 9

10 Expression Encoder 2からの発行パブリッシュの設定エンコード終了時に自動アップロード Silverlight Streamingの Account Silverlight StreamingのKey Keyを保存し新しいジョブからも利用 10

services.live.com/invoke/34502/xencoderapp8/iframe.

11 Silverlight StreamingからWebサトへ <方法１> iframeでの貼り付け方法２ Liveコントロールでの貼り付け利用例 Windows Live Spaceに展開 <iframe src= scrolling="no" frameborder="0" style="width:500px; height:400px"></iframe> 11

12 demo Expression Blend 2を使ってメデゖゕプレヤーを作ろうその１ Blend 2で画面作成すぐにテスト実行メデゖゕ再生の最重要ポント鍵はMediaElementにあり <MediaElement Source= <メディアのファイル名> /> 何十人もの開発者の努力がこの１つのタグに集約 HTTP通信によるWeb上のメデゖゕの参照プログレッシブダウンロード Silverlight Streaming Windows Media Serverストリーミング詳細はサポートされるメデゖゕ形式とプロトコル 12

13 demo Expression Blend 2を使ってメデゖゕプレヤーを作ろうその２ Blend 2で画面ゕニメーション作成 Visual Studio 2008でJavaScript記述 MediaElementオブジェクトの主要なプロパテゖプロパティ AutoPlay : 自動再生を有効にする (True/False) Balance : 左右の音声バランス (-1 から 1) CurrentState : メディアの状態 IsMuted : 消音状態 (True/False) Markers : メディアに対応するマーカ Position : メディアの再生で経過した時間 Source : メディアのソース Volume : 再生時の音量 (0から1) 13

14 MediaElementオブジェクトの主要なメソッド AddEventListener : イベントハンドラのマップ Pause : 一時停止 Play : 再生 Stop : 停止 MediaElementオブジェクトの主要なベント CurrentStateChanged : メディア状態の変更 MarkerReached : メディアマーカへの到達 MediaEnded : メディア再生の終了 MediaOpened : メディアが再生可能状態 MediaFailed : メディアが再生不能状態 14

15 Blend 2での作業 MediaElement x:name= MyVideo Source= Butterfly.wmv Rectangle x:name= MyButton Blend 2での作業続きキーフレームの記録 15

16 demo Expression Blend 2.5 Previewを使ってメデゖゕプレヤーを作ろう C#で簡単にやってみる 2008/10/31 にExpression Blend 2 SP1として日本語版がリリースされました demo 字幕機能付きのメデゖゕプレヤーを作ろうサーバ側との連携 AJAXの利用 16

$marker は TimelineMarkerのオブジェクト TimelineMakerオブジェクト Time : マーカの位置 (メディアの先頭からの経過時間) Text : マーカに対応するテキスト Type: Scriptコマンドの場合にマーカの種別を表すもの function myvideo_markerreached(sender, eventargs) { var marker =$

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ブラウザ Event handlers イベントハンドラ <JSON Proxy> MyService <Webサーバ> IIS + ASP.NET AJAX <アプリケーション> Default.aspx Event handlers JavaScriptの By JavaScript イベントハンドラ MyService.asmx ScriptManager Silverlight.js CreateSilverlight.js データベース Page.xaml 17 Other Web Web サービス Services

demo Silverlight DRMを使ってみるメデゖゕの暗号化 Silverlight 2による再生 Silverlight DRMソリューション概要０コンテンツのパッケージング <Media> <Media> コンテンツ <Media> コンテンツコンテンツコンテンツクラウド <WWW> Indiv Server ２個別化 <WWW> ライセンス発行サーバ

18 demo Silverlight DRMを使ってみるメデゖゕの暗号化 Silverlight 2による再生 Silverlight DRMソリューション概要０コンテンツのパッケージング <Media> <Media> コンテンツ <Media> コンテンツコンテンツコンテンツクラウド <WWW> Indiv Server ２個別化 <WWW> ライセンス発行サーバ rightsmanager.asmx ライセンス発行プラグイン(dll) IIS + ASP.NET <Browser> SL2アプリ１コンテンツ取得 Silverlight 2 MediaElement ６再生 <Media> コンテンツ PlayReady クライアント Windows Server 2003/2008 DRM 有効化４ライセンス送出３ライセンス要求５復号化ライセンス 18

19 Silverlight DRMとWMP/WM RMの共存既存コンテンツの書き換えは不要同一のIIS環境 <Media> <Media> コンテンツ <Media> コンテンツコンテンツコンテンツクラウド <Classic ASP> WM RM ライセンスサーバ <ASP.NET> PlayReady ライセンス (2) サーバ rightsmanager.as mx (1) <Desktopアプリケーション> Windows Media Player <Webアプリケーション> Silverlight 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

関連リソース Silverlightドキュメント http://msdn.microsoft.com/ja-jp/library/aa155110.aspx Silverlight Streamingについて http://msdn.microsoft.com/ja-jp/library/bb851610.

20 関連リソース Silverlightドキュメント Silverlight Streamingについて Expression Blendを使ったSilverlight QuickStart Silverlightではじめるメデゖゕ配信 MSDNオフランセミナーの講演資料公開ありがとうございました 20

21 Appendix 参考にしていただければ幸いですメデゖゕ配信の仕組み２通りの方法ストリーミングプログレッシブダウンロードすべてのデータのダウンロード不要再生に必要なデータのみ転送専用のサーバが必要ライブ中継が可能すべてのデータのダウンロードダウンロードしながら再生一般のWebサーバで十分オンデマンドビデオ 21

メデゖゕ配信の仕組みストリーミング Describe abc.wmv abc.wmv Header Response Header Header S S S 1 2 3 Setup abc.wmv Stream 2 & 3 Setup Response Play abc.

22 メデゖゕ配信の仕組みストリーミング Describe abc.wmv abc.wmv Header Response Header Header S S S 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 ストリーミング多くのメディア機能に対応サーバ側再生リスト帯域幅の最適化管理用のインフラが必要特定のメディア形式とプレイヤーに強く依存 22

23 メデゖゕ配信の仕組み標準のプログレッシブダウンロード Get abc.wmv 200 OK abc.wmv 標準のプログレッシブダウンロード管理と構成が簡単 Send and forget モデルは最大限の帯域を消費サーバ資源の低い使用率上位のメディアストリーミングの機能に未対応セキュリティで保護された SSL通信のサポート標準のWebクライアントのサポート生放送標準のファイアフォールキャッシュプロキシに対応保護されたコンテンツに対する再生リストの仕組み無し早送り巻きもどし 23

Framework Browser API JavaScript Engine Download APIS Sample XAML

0/2それぞれに利用可能な方法 Expression Blend 2とVisual Studio 2008 default.

24 Silverlightのゕーキテクチャ Silverlight 1.0 (2007年) Silverlight 2 (2008年中) Web Browser Managed Code UI Framework Browser API JavaScript Engine Download APIS Sample XAML Fill Input UI Core Media JavaScript APIで操作する方法 Silverlight 1.0/2それぞれに利用可能な方法 Expression Blend 2とVisual Studio 2008 default.html イベントハンドライベントハンドライベントハンドラ Browser API createsilverlight() オブジェクトの参照 XAML JavaScript Engine Download APIs UI Core 24 Input Media

25 JavaScript APIで開発するSilverlight ゕプリケーションの構成要素 Silverlight用スクリプトラブラリ Silverlight.js (Silverlight SDKに付属) createsiverlight.js (アプリケーションに応じて作成 XAMLフゔル Silverlight用の画面を構成する要素を定義 HTML文書スクリプトライブラリの取り込み Silverlightプラグインの表示領域を決める Silverlightプラグインを実行する文字だけだと JavaScriptのコード想像しづらい SilverlightとHTMLを組み合わせるかも図で表すとインターネットクラウド <リソース> <アプリケーション> default.html Event handlers Event handlers By JavaScript By JavaScript <ダウンロード> v1.wmv Silverlight.js <ストリーミング> v2.wmv CreateSilverlight.js <ダウンロード> s1.mp3 Page.xaml Browser API JavaScript Engine Download APIS <ダウンロード> image1.jpg <Silverlight 2 実行環境> <ダウンロード> image2.png XAML S UI Core Input Media 25 <ダウンロード> x1.xaml

26 Blend2で作ったXAMLの例 <Canvas xmlns=" xmlns:x=" 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:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:02" Value="86" KeySpline="1,0.16,0.122,0.31"/> </DoubleAnimationUsingKeyFrames> </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.demo _001) Demo _001 = {}; Demo _001.Page = function() { } Demo _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() アニメーションの開始 } } 26

27 .NETでコンパルした場合の構成 HTMLファイル (objectタグを利用 XAPファイル (ZIP形式の圧縮ファイル) 中身 AppManifest.xml DLLファイル JavaScript APIと異なり XAMLのデザイン内容記述したロジックを他者に読み取られることがない Blend2.5 Previewで作ったXAMLの例 <UserControl xmlns=" xmlns:x=" 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)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="180"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:name="layoutroot" Background="White" > <MediaElement Margin="8,8,249,179" x:name="myvideo" Source="cnt _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=" , "> <GradientStop Color="#FF000000"/> <GradientStop Color="#FFF5B910" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> </UserControl> 27

$Page.xaml.csにC#で記述するコード例 namespace SLDay_demo001 { public partial class Page : UserControl { public Page() { InitializeComponent(); PlayButton.$ $Forever; } void StopButton_Click(object sender, RoutedEventArgs e) { MyVideo.Stop(); MyStory.$

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 28

スライド 1

スライド 1 Vol. 5 Silverlight Media 編 Silverlight2 によるメデゖゕ配信概要セッションでのフゖードバックを受け当日の内容に大幅に加筆しています特に Deep Zoom については Photo Zoom についての紹介を加えましたマクロソフト株式会社デベロッパー & プラットフォーム統括本部デザナー製品部 Silverlightテクニカルマネージャ大西彰 http://blogs.msdn.com/aonishi/