クラウドサービスを使って作る割と普通な動画サイト？

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

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