超簡単! Azure Media Services のHTMLタグの作り方

Azure Media Servicesを選択頂くと、Azure Media Playerがもれなく無料で使えます。
ここでは、その簡単な使い方をご説明します。

  1. デモサイトに行きます

http://ampdemo.azureedge.net/azuremediaplayer.html


  1. ご自身の動画のURLを貼り付けます。そして [Update Player] を押します。
    動画が再生されるはずです。

動かなかった際に確認する事:

  1. codeを抽出

先のサイトの画面真ん中付近に、 というタブがあります。こちらには [Get Player Code] があります。これは本番で使えるHTMLタグです。

以下の様に表示されます。

  1. HTMLへ埋め込み

    お手持ちの、HTML

    HEAD

    BODY SCRIPT タグ
に、それぞれのコードをコピーください。

サンプルのHTMLファイル

https://github.com/dahatake/Azure-Media-Services-Samples/blob/master/31.%20AzureMediaPlayer_Simple/index.htm

  1. HTMLをブラウザーで起動

ローカルでも、任意のWeb Serverにでも、作成されたHTMLを置いてください。

勿論、Azure Web Appがお勧めですwww。スマートフォンからもアクセスして動作確認をしてください。

視聴数など取りたいでしょうから、Application Insightのタグを埋め込むと最高です! ログデータがAzure Storageに保存され、後から抽出して二次利用がしやすいですから。

Application Insight:

https://azure.microsoft.com/ja-jp/documentation/articles/app-insights-javascript/

Azure Media Player ドキュメント:

http://amp.azure.net/libs/amp/latest/docs/

Azure Media Player Plugin:

http://amp.azure.net/libs/amp/latest/docs/PLUGINS.html

ご参考: ビデオ プレーヤー アプリケーションの開発

https://azure.microsoft.com/ja-jp/documentation/articles/media-services-develop-video-players/

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中