Downloaded 22 times
More Related Content
Similar to Windows Azure Media Serviceで作成する割と普通な動画サイト
Windows Azure Media Serviceで作成する割と普通な動画サイト
- 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.
- 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.
- 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 AzureMedia Service にて ① クラウドストレージに動画を格納 ② クラウド上で動画をエンコード ③ エンコードした動画を公開＆配信 管理ポータルで demo ... 25
- 26. ①クラウドストレージへの格納 //Media Service 制御用のコンテキスト作成 varcontext = 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.