windows azure media serviceで作成する割と普通な動画サイト
DESCRIPTION
TRANSCRIPT
クラウドサービスを使って作る割と普通な動画サイト?
2013年3月9日
#jazug
割と普通
自己紹介
• 割と普通(@normalian)– Japan Windows Azure User Group コアメンバ(キリッ
– 普段はスーツを着こなすリーマン(キリリッ
– Microsoft MVP for Windows Azure 2010~※Microsoft 様の社員ではありません
– 「Windows Azure テクニカルハンドブック」執筆
2
3
はじめに
動画再生の基礎(クライアント側)
動画再生の基礎(サーバ側)
動画再生のコツ的な何か
まとめ
4
お気に入り動画をどこでも見たい
秘密の(*´Д`)ハァハァ動画こってる素敵な動画
5
でも動画の再生は色々と…
• デバイスが色々あり杉
– PC、タブレット、スマートフォン
解像度差異 & 通信回線差異どうする?
• 再生の実装方式
– HTML5、RIA(Flash/ Silverlight)、Native
• 配信方法
– ファイル直置き?ストリーミング?
6
手持ちの動画をどうしよう?
• ゴロゴロ寝ながら見たい
• iPhone, iPad, Surface とかでも見たい
• ローカルで頑張って管理したくない
7
はじめに
動画再生の基礎(クライアント側)
動画再生の基礎(サーバ側)
動画再生のコツ的な何か
まとめ
8
でも動画の再生は色々と…
スマートフォン タブレット
PC
クライアント側
9
動画の再生は大枠三つ(1/2)
RIA
Native
○ (一応)マルチデバイスで利用可能○ JavaScript プラグインが多々× ブラウザ毎に対応 codec が異なる
○ ストリーミング再生/凝った再生系が対応可能(※注)
× iPhone/iPad で利用できず、Android 側も微妙
○ デバイスの隠された機能もフル活用× デバイス毎に頑張って実装が必要
10
動画の再生は大枠三つ(2/2)
RIA
Native
機能低汎用高
機能高汎用低 ※注 HTTP Live Streaming の場合 HTML5 でも可能
HTML5 での動画再生(1/3)
ブラウザ MP4(H.264) WebM Ogg
IE9 以降 ○ △
Firefox △ ○ ○
Chrome ○ ○ ○
Safari ○
Opera ○ ○
11
• ブラウザ毎で対応コデックがバラバラ
• MP4 が良さげだが PC 向けだけなら RIA ?
△ …プラグインを別途インストールで再生可能
HTML5 での動画再生(2/3)
• ブラウザによってサポートされない動画フォーマットがあるため、動画ソースを複数指定する必要あり
12
<video controls><source src=“demo.webm” type=“video/webm”><source src=“demo.mp4” type=“video/mp4”>HTML5 がサポートされてません
</video>
HTML5 での動画再生(3/3)
• JavaScript プラグイン多め
13
VideoJsPlayer Framework
RIA での動画再生(1/2)
14
• RIA で実現可能な配信方式
– ストリーミング再生
– コンテンツ保護
– 直接ダウンロードの回避
– ライブ配信※注1 HTML5 の <video> と異なり高度な再生が可能※注2 HTTP Live Streaming がサポートされた場合、
RIA を利用せずにストリーミング再生が可能
RIA での動画再生(2/2)
15
• RIA での動画再生用コンポーネントを利用して動画を再生可能
<Core:SMFPlayer Name="SMFPlayer"><Core:SMFPlayer.Playlist><Media:PlaylistItem
DeliveryMethod="AdaptiveStreaming"MediaSource="http://smf.vertigo.com/videos/wildlife.wmv"/>
</Core:SMFPlayer.Playlist></Core:SMFPlayer>
demo ...
動画再生
17
はじめに
動画再生の基礎(クライアント側)
動画再生の基礎(サーバ側)
動画再生のコツ的な何か
まとめ
18
サーバ側の実現方式は??
スマートフォン タブレット
PC
クライアント側 サーバ側
19
サーバ側の課題
• 動画ファイルが重すぎ
– 一つのファイルが大きすぎて格納しきれない
– マルチデバイス向けに複数エンコードも…
• 配信サーバに負荷がかかりまくり
– 動画ファイルを大量に配信すると負荷が…
– エンコードの CPU 負荷が大きすぎ
• 通信回線が遅い
– 細い回線だとつらい
20
サーバ側の課題をクラウドで解決!
• 動画ファイルが重すぎ
– クラウドストレージがあるよ!
※アップロードは無料ですし(/ω\)イヤン
• 配信サーバに負荷がかかりまくり
– クラウドの CPU リソースを使えばいいよ!
• 通信回線が遅い
– 容量小さめの動画エンコード+キャッシュ!
21
サーバ側の課題をクラウドで解決!
① 配信制御&エンコーディング機能
– Windows Azure Media Service
• Silverlight + IIS Smooth Streaming 可能
– Amazon Elastic Transcoder
• Flash + Adobe Media Server の ストリーミング再生可能
② コンテンツキャッシュ機能
– Windows Azure Contents Delivery Network
– Amazon CloudFront
① 配信制御&エンコーディング機能
動画エンコード
iPhone 向け Android向け PC 向け
• 色々なデバイスに対する動画が対応可能!
② コンテンツキャッシュ機能
• 静的コンテンツを近隣のサーバでキャッシュして配信する
東アジア(香港) 東京
24
はじめに
動画再生の基礎(クライアント側)
動画再生の基礎(サーバ側)
動画再生のコツ的な何か
まとめ
25
サーバ側での対応
管理ポータルで demo ...
• Windows Azure Media Service にて
① クラウドストレージに動画を格納
② クラウド上で動画をエンコード
③ エンコードした動画を公開&配信
26
①クラウドストレージへの格納
//Media Service 制御用のコンテキスト作成var context =
new CloudMediaContext(_accountName, _accountKey);
// 動画格納用のインスタンスを作成var asset = context.Assets.Create("某店舗動画",
AssetCreationOptions.StorageEncrypted);
// 実ファイルを取得var assetFile =
asset.AssetFiles.Create(Path.GetFileName(filePath));
// 動画のアップロードassetFile.Upload(filePath);
27
②クラウドでのエンコード
CloudMediaContext context = <略>;var asset = <略>;
//ジョブの作成と実行var job = context.Jobs.Create("Encoding Job");var task = job.Tasks.AddNew("Encoding Task",
GetMediaProcessor("Windows Azure Media Encoder",context),
"H264 Broadband SD 4x3",TaskOptions.None);
task.InputAssets.Add(asset);task.OutputAssets.AddNew(“鍋動画 – エンコード版",
AssetCreationOptions.None);job.Submit();
※参考 http://msdn.microsoft.com/en-us/library/windowsazure/jj129582.aspx
28
③動画の公開&配信
CloudMediaContext context = <略>;var asset = <略>;
// 許可属性を作成IAccessPolicy accessPolicy =
context.AccessPolicies.Create("30日読みとり許可",TimeSpan.FromDays(30),AccessPermissions.Read);
// 配置情報の付与ILocator locator =
context.Locators.CreateLocator(LocatorType.Sas,asset,accessPolicy,DateTime.UtcNow.AddDays(-1));
29
サーバ側での対応
ソースコードで demo ...
① クラウドストレージに動画を格納
② クラウド上で動画をエンコード
③ エンコードした動画を公開&配信※REST API + Java SDK も公開
30
はじめに
動画再生の基礎(クライアント側)
動画再生の基礎(サーバ側)
動画再生のコツ的な何か
まとめ
動画の見せ方 – 字幕編
• クライアント側で解決
– PC 向けには JavaScript でも十分いける
• Timed Text Markup Language の利用
http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/
– スマフォ、タブレットは Native でないと困難
• iOS5 以降(iPhone のみ?)、Android 2.X系?は動画のインライン再生ができない
• サーバ側で解決
– そもそも文字列を埋め込んだ動画をエンコードする(取り回し悪いけど…)
動画の見せ方 – 予告だけ見せたい
• JavaScript を利用した source 属性の入れ替え or 動画再生前に特定ページへリダイレクト
• 閲覧者側に余計な操作をさせたくなければRIA or Native で
<video controls><source src=“demo.webm” type=“video/webm”><source src=“demo.mp4” type=“video/mp4”>HTML5 がサポートされてません
</video>
33
はじめに
動画再生の基礎(クライアント側)
動画再生の基礎(サーバ側)
動画再生のコツ的な何か
まとめ
34
まとめ
• そもそものターゲットを決めましょう
– マルチデバイスし過ぎは即死の元
• 高度な再生を求めなければ HTML5 で
– ストリーミング再生とかいるなら RIA で再生
• クラウドを利用して手間を減らそう
– 大きいファイル、一時的に大き目な CPU リソースはクラウドが得意
35
御清聴ありがとうございました