Windows Azure Media Serviceで作成する割と普通な動画サイト

6,393 views
6,209 views

Published on

Published in: Sports
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,393
On SlideShare
0
From Embeds
0
Number of Embeds
1,565
Actions
Shares
0
Downloads
19
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Windows Azure Media Serviceで作成する割と普通な動画サイト

  1. 1. クラウドサービスを使って作る 割と普通な動画サイト? 2013年3月9日 #jazug 割と普通
  2. 2. 自己紹介• 割と普通(@normalian) – Japan Windows Azure User Group コアメンバ(キリッ – 普段はスーツを着こなすリーマン(キリリッ – Microsoft MVP for Windows Azure 2010~ ※Microsoft 様の社員ではありません – 「Windows Azure テクニカルハンドブック」執筆 2
  3. 3. はじめに 動画再生の基礎(クライアント側) 動画再生の基礎(サーバ側) 動画再生のコツ的な何かまとめ 3
  4. 4. お気に入り動画をどこでも見たいこってる素敵な動画 秘密の(*´Д`)ハァハァ動画 4
  5. 5. でも動画の再生は色々と…• デバイスが色々あり杉 – PC、タブレット、スマートフォン 解像度差異 & 通信回線差異どうする?• 再生の実装方式 – HTML5、RIA(Flash/ Silverlight)、Native• 配信方法 – ファイル直置き?ストリーミング? 5
  6. 6. 手持ちの動画をどうしよう?• ゴロゴロ寝ながら見たい• iPhone, iPad, Surface とかでも見たい• ローカルで頑張って管理したくない 6
  7. 7. はじめに 動画再生の基礎(クライアント側) 動画再生の基礎(サーバ側) 動画再生のコツ的な何かまとめ 7
  8. 8. でも動画の再生は色々と…PCスマートフォン タブレット クライアント側 8
  9. 9. 動画の再生は大枠三つ(1/2) RIANative 9
  10. 10. 動画の再生は大枠三つ(2/2)機能低汎用高 ○ (一応)マルチデバイスで利用可能 ○ JavaScript プラグインが多々 × ブラウザ毎に対応 codec が異なる ○ ストリーミング再生/凝った再生系 が対応可能(※注) RIA × iPhone/iPad で利用できず、 Android 側も微妙 ○ デバイスの隠された機能もフル活用 × デバイス毎に頑張って実装が必要機能高 Native汎用低 ※注 HTTP Live Streaming の場合 HTML5 でも可能 10
  11. 11. HTML5 での動画再生(1/3)• ブラウザ毎で対応コデックがバラバラ• MP4 が良さげだが PC 向けだけなら RIA ?ブラウザ MP4(H.264) WebM OggIE9 以降 ○ △Firefox △ ○ ○Chrome ○ ○ ○Safari ○Opera ○ ○ △ …プラグインを別途インストールで再生可能 11
  12. 12. HTML5 での動画再生(2/3)• ブラウザによってサポートされない動画 フォーマットがあるため、動画ソースを 複数指定する必要あり <video controls> <source src=“demo.webm” type=“video/webm”> <source src=“demo.mp4” type=“video/mp4”> HTML5 がサポートされてません </video> 12
  13. 13. HTML5 での動画再生(3/3)• JavaScript プラグイン多め VideoJs Player Framework 13
  14. 14. RIA での動画再生(1/2)• RIA で実現可能な配信方式 – ストリーミング再生 – コンテンツ保護 – 直接ダウンロードの回避 – ライブ配信 ※注1 HTML5 の <video> と異なり高度な再生が可能 ※注2 HTTP Live Streaming がサポートされた場合、 RIA を利用せずにストリーミング再生が可能 14
  15. 15. RIA での動画再生(2/2)• RIA での動画再生用コンポーネントを利 用して動画を再生可能 <Core:SMFPlayer Name="SMFPlayer"> <Core:SMFPlayer.Playlist> <Media:PlaylistItemDeliveryMethod="AdaptiveStreaming"MediaSource="http://smf.vertigo.com/videos/wildlife.wmv"/> </Core:SMFPlayer.Playlist> </Core:SMFPlayer> 15
  16. 16. 動画再生demo ...
  17. 17. はじめに 動画再生の基礎(クライアント側) 動画再生の基礎(サーバ側) 動画再生のコツ的な何かまとめ 17
  18. 18. サーバ側の実現方式は??PCスマートフォン タブレット クライアント側 サーバ側 18
  19. 19. サーバ側の課題• 動画ファイルが重すぎ – 一つのファイルが大きすぎて格納しきれない – マルチデバイス向けに複数エンコードも…• 配信サーバに負荷がかかりまくり – 動画ファイルを大量に配信すると負荷が… – エンコードの CPU 負荷が大きすぎ• 通信回線が遅い – 細い回線だとつらい 19
  20. 20. サーバ側の課題をクラウドで解決!• 動画ファイルが重すぎ – クラウドストレージがあるよ! ※アップロードは無料ですし(/ω\)イヤン• 配信サーバに負荷がかかりまくり – クラウドの CPU リソースを使えばいいよ!• 通信回線が遅い – 容量小さめの動画エンコード+キャッシュ! 20
  21. 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. 22. ① 配信制御&エンコーディング機能• 色々なデバイスに対する動画が対応可能! 動画エンコード iPhone 向け Android向け PC 向け
  23. 23. ② コンテンツキャッシュ機能• 静的コンテンツを近隣のサーバでキャッ シュして配信する東アジア(香港) 東京
  24. 24. はじめに 動画再生の基礎(クライアント側) 動画再生の基礎(サーバ側) 動画再生のコツ的な何かまとめ 24
  25. 25. サーバ側での対応• Windows Azure Media Service にて ① クラウドストレージに動画を格納 ② クラウド上で動画をエンコード ③ エンコードした動画を公開&配信管理ポータルで demo ... 25
  26. 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. 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. 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. 29. サーバ側での対応① クラウドストレージに動画を格納② クラウド上で動画をエンコード③ エンコードした動画を公開&配信 ※REST API + Java SDK も公開ソースコードで demo ... 29
  30. 30. はじめに 動画再生の基礎(クライアント側) 動画再生の基礎(サーバ側) 動画再生のコツ的な何かまとめ 30
  31. 31. 動画の見せ方 – 字幕編• クライアント側で解決 – PC 向けには JavaScript でも十分いける • Timed Text Markup Language の利用 http://ie.microsoft.com/testdrive/Graphics/Capt ionMaker/ – スマフォ、タブレットは Native でないと困難 • iOS5 以降(iPhone のみ?)、Android 2.X系?は動 画のインライン再生ができない• サーバ側で解決 – そもそも文字列を埋め込んだ動画をエンコー ドする(取り回し悪いけど…)
  32. 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. はじめに 動画再生の基礎(クライアント側) 動画再生の基礎(サーバ側) 動画再生のコツ的な何かまとめ 33
  34. 34. まとめ• そもそものターゲットを決めましょう – マルチデバイスし過ぎは即死の元• 高度な再生を求めなければ HTML5 で – ストリーミング再生とかいるなら RIA で再生• クラウドを利用して手間を減らそう – 大きいファイル、一時的に大き目な CPU リ ソースはクラウドが得意 34
  35. 35. 御清聴ありがとうございました 35

×