1. クラウドサービスを使って作る
割と普通な動画サイト？
2013年3月9日
#jazug
割と普通

2. 自己紹介
• 割と普通（@normalian）
– Japan Windows Azure User Group コアメンバ(ｷﾘｯ
– 普段はスーツを着こなすリーマン(ｷﾘﾘｯ
– Microsoft MVP for Windows Azure 2010～
※Microsoft 様の社員ではありません
– 「Windows Azure テクニカルハンドブック」執筆
2

3. はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
3

4. お気に入り動画をどこでも見たい
こってる素敵な動画 秘密の(*´Д`)ハァハァ動画
4

5. でも動画の再生は色々と…
• デバイスが色々あり杉
– PC、タブレット、スマートフォン
解像度差異 ＆ 通信回線差異どうする？
• 再生の実装方式
– HTML5、RIA(Flash/ Silverlight)、Native
• 配信方法
– ファイル直置き？ストリーミング？
5

6. 手持ちの動画をどうしよう？
• ゴロゴロ寝ながら見たい
• iPhone, iPad, Surface とかでも見たい
• ローカルで頑張って管理したくない
6

7. はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
7

8. でも動画の再生は色々と…
PC
スマートフォン タブレット
クライアント側
8

9. 動画の再生は大枠三つ(1/2)
RIA
Native
9

10. 動画の再生は大枠三つ(2/2)
機能低
汎用高 ○ (一応)マルチデバイスで利用可能
○ JavaScript プラグインが多々
× ブラウザ毎に対応 codec が異なる
○ ストリーミング再生／凝った再生系
が対応可能(※注)
RIA × iPhone/iPad で利用できず、
Android 側も微妙
○ デバイスの隠された機能もフル活用
× デバイス毎に頑張って実装が必要
機能高
Native
汎用低 ※注 HTTP Live Streaming の場合 HTML5 でも可能
10

11. HTML5 での動画再生(1/3)
• ブラウザ毎で対応コデックがバラバラ
• MP4 が良さげだが PC 向けだけなら RIA ？
ブラウザ MP4(H.264) WebM Ogg
IE9 以降 ○ △
Firefox △ ○ ○
Chrome ○ ○ ○
Safari ○
Opera ○ ○
△ …プラグインを別途インストールで再生可能
11

12. HTML5 での動画再生(2/3)
• ブラウザによってサポートされない動画
フォーマットがあるため、動画ソースを
複数指定する必要あり
<video controls>
<source src=“demo.webm” type=“video/webm”>
<source src=“demo.mp4” type=“video/mp4”>
HTML5 がサポートされてません
</video>
12

13. HTML5 での動画再生(3/3)
• JavaScript プラグイン多め
VideoJs
Player Framework
13

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

16. 動画再生
demo ...

17. はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
17

18. サーバ側の実現方式は？？
PC
スマートフォン タブレット
クライアント側 サーバ側
18

19. サーバ側の課題
• 動画ファイルが重すぎ
– 一つのファイルが大きすぎて格納しきれない
– マルチデバイス向けに複数エンコードも…
• 配信サーバに負荷がかかりまくり
– 動画ファイルを大量に配信すると負荷が…
– エンコードの CPU 負荷が大きすぎ
• 通信回線が遅い
– 細い回線だとつらい
19

20. サーバ側の課題をクラウドで解決！
• 動画ファイルが重すぎ
– クラウドストレージがあるよ！
※アップロードは無料ですし(/ω＼)ｲﾔﾝ
• 配信サーバに負荷がかかりまくり
– クラウドの CPU リソースを使えばいいよ！
• 通信回線が遅い
– 容量小さめの動画エンコード＋キャッシュ！
20

21. サーバ側の課題をクラウドで解決！
① 配信制御＆エンコーディング機能
– Windows Azure Media Service
• Silverlight + IIS Smooth Streaming 可能
– Amazon Elastic Transcoder
• Flash + Adobe Media Server の ストリーミング
再生可能
② コンテンツキャッシュ機能
– Windows Azure Contents Delivery Network
– Amazon CloudFront
21

22. ① 配信制御＆エンコーディング機能
• 色々なデバイスに対する動画が対応可能！
動画エンコード
iPhone 向け Android向け PC 向け

23. ② コンテンツキャッシュ機能
• 静的コンテンツを近隣のサーバでキャッ
シュして配信する
東アジア(香港) 東京

24. はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
24

25. サーバ側での対応
• Windows Azure Media Service にて
① クラウドストレージに動画を格納
② クラウド上で動画をエンコード
③ エンコードした動画を公開＆配信
管理ポータルで demo ...
25

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

29. サーバ側での対応
① クラウドストレージに動画を格納
② クラウド上で動画をエンコード
③ エンコードした動画を公開＆配信
※REST API + Java SDK も公開
ソースコードで demo ...
29

30. はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
30

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>

33. はじめに
動画再生の基礎（クライアント側）
動画再生の基礎（サーバ側）
動画再生のコツ的な何か
まとめ
33

34. まとめ
• そもそものターゲットを決めましょう
– マルチデバイスし過ぎは即死の元
• 高度な再生を求めなければ HTML5 で
– ストリーミング再生とかいるなら RIA で再生
• クラウドを利用して手間を減らそう
– 大きいファイル、一時的に大き目な CPU リ
ソースはクラウドが得意
34

35. 御清聴ありがとうございました
35