Contenu connexe Similaire à Windows Azure Media Serviceで作成する割と普通な動画サイト Similaire à Windows Azure Media Serviceで作成する割と普通な動画サイト (20) Windows Azure Media Serviceで作成する割と普通な動画サイト2. 自己紹介
• 割と普通(@normalian)
– Japan Windows Azure User Group コアメンバ(キリッ
– 普段はスーツを着こなすリーマン(キリリッ
– Microsoft MVP for Windows Azure 2010~
※Microsoft 様の社員ではありません
– 「Windows Azure テクニカルハンドブック」執筆
2
5. でも動画の再生は色々と…
• デバイスが色々あり杉
– PC、タブレット、スマートフォン
解像度差異 & 通信回線差異どうする?
• 再生の実装方式
– HTML5、RIA(Flash/ Silverlight)、Native
• 配信方法
– ファイル直置き?ストリーミング?
5
10. 動画の再生は大枠三つ(2/2)
機能低
汎用高 ○ (一応)マルチデバイスで利用可能
○ JavaScript プラグインが多々
× ブラウザ毎に対応 codec が異なる
○ ストリーミング再生/凝った再生系
が対応可能(※注)
RIA × iPhone/iPad で利用できず、
Android 側も微妙
○ デバイスの隠された機能もフル活用
× デバイス毎に頑張って実装が必要
機能高
Native
汎用低 ※注 HTTP Live Streaming の場合 HTML5 でも可能
10
12. HTML5 での動画再生(2/3)
• ブラウザによってサポートされない動画
フォーマットがあるため、動画ソースを
複数指定する必要あり
<video controls>
<source src=“demo.webm” type=“video/webm”>
<source src=“demo.mp4” type=“video/mp4”>
HTML5 がサポートされてません
</video>
12
14. RIA での動画再生(1/2)
• RIA で実現可能な配信方式
– ストリーミング再生
– コンテンツ保護
– 直接ダウンロードの回避
– ライブ配信
※注1 HTML5 の <video> と異なり高度な再生が可能
※注2 HTTP Live Streaming がサポートされた場合、
RIA を利用せずにストリーミング再生が可能
14
15. RIA での動画再生(2/2)
• RIA での動画再生用コンポーネントを利
用して動画を再生可能
<Core:SMFPlayer Name="SMFPlayer">
<Core:SMFPlayer.Playlist>
<Media:PlaylistItem
DeliveryMethod="AdaptiveStreaming"
MediaSource="http://smf.vertigo.com/videos/wildlif
e.wmv"/>
</Core:SMFPlayer.Playlist>
</Core:SMFPlayer>
15
19. サーバ側の課題
• 動画ファイルが重すぎ
– 一つのファイルが大きすぎて格納しきれない
– マルチデバイス向けに複数エンコードも…
• 配信サーバに負荷がかかりまくり
– 動画ファイルを大量に配信すると負荷が…
– エンコードの CPU 負荷が大きすぎ
• 通信回線が遅い
– 細い回線だとつらい
19
21. サーバ側の課題をクラウドで解決!
① 配信制御&エンコーディング機能
– Windows Azure Media Service
• Silverlight + IIS Smooth Streaming 可能
– Amazon Elastic Transcoder
• Flash + Adobe Media Server の ストリーミング
再生可能
② コンテンツキャッシュ機能
– Windows Azure Contents Delivery Network
– Amazon CloudFront
21
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);
26
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 27
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));
28
31. 動画の見せ方 – 字幕編
• クライアント側で解決
– PC 向けには JavaScript でも十分いける
• Timed Text Markup Language の利用
http://ie.microsoft.com/testdrive/Graphics/Capt
ionMaker/
– スマフォ、タブレットは Native でないと困難
• iOS5 以降(iPhone のみ?)、Android 2.X系?は動
画のインライン再生ができない
• サーバ側で解決
– そもそも文字列を埋め込んだ動画をエンコー
ドする(取り回し悪いけど…)
32. 動画の見せ方 – 予告だけ見せたい
• JavaScript を利用した source 属性の入れ
替え or 動画再生前に特定ページへリダイ
レクト
• 閲覧者側に余計な操作をさせたくなければ
RIA or Native で
<video controls>
<source src=“demo.webm” type=“video/webm”>
<source src=“demo.mp4” type=“video/mp4”>
HTML5 がサポートされてません
</video>
34. まとめ
• そもそものターゲットを決めましょう
– マルチデバイスし過ぎは即死の元
• 高度な再生を求めなければ HTML5 で
– ストリーミング再生とかいるなら RIA で再生
• クラウドを利用して手間を減らそう
– 大きいファイル、一時的に大き目な CPU リ
ソースはクラウドが得意
34