Windows Azure Media Serviceで作成する割と普通な動画サイト
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,236 views

 

Statistics

Views

Total Views
4,236
Views on SlideShare
3,209
Embed Views
1,027

Actions

Likes
4
Downloads
9
Comments
0

7 Embeds 1,027

http://d.hatena.ne.jp 792
http://forestay33.rssing.com 107
http://normalian.hatenablog.com 85
https://twitter.com 36
http://forestay33.veritise.com 5
http://translate.googleusercontent.com 1
https://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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