ASP.NET MVCでAzure Media Playerを利用した動画再生ページの作成

はじめに

この記事は「ASP.NET Advent Calendar 2016 - Qiita」の19日目になります。

概要

Azure Media PlayerとAzure Media Serviceを利用した動画配信サイトをASP.NET MVCで作成する方法を記載していきます。

Azure Media playerとはマイクロソフト社が提供するマルチプラットフォーム対応したJavascriptベースの音楽・動画再生用のプレイヤーです。拡張プラグインが豊富に提供されていたり、ApplicaitonInsgithと連携した再生ログ取得・分析ができたり、暗号化コンテンツやストリーミングコンテンツの再生ができたりとかなり高機能なプレイヤーです。

今のところ公式ページに料金の表示がないので無料で利用できるようです。

サンプルサイトの概要

前提として下記のサイトを参考にAzureMediaServiceの構築と配信用動画の準備をしてください。

• Azure Media Serviceの利用方法（新ポータル版）

下記のGitHubよりCloneまたはDLして利用してください。

• Sample-AzureMediaPlayer

サンプルサイトの動画一覧

コンテンツの一覧を表示します。
表示内容はコンテンツ名、更新日付、コンテンツ全体の合計容量、サムネイル画像です。

AzureMediaServiceのアセット一覧

上記のコンテンツ一覧は公開設定がされているアセットのコンテンツを表示しています。
公開設定はAzurePortalから行います。

サンプルサイトでの動画再生

コンテンツのサムネイルもしくは再生ボタンを押下することで再生用のダイアログが表示されます。
コンテンツを再生しているのがAzureMediaPlayerです。ここではオプションとして再生品質の選択。音量調整、全画面切り替え機能を付与しています。通常AzureMediaPlayerは透かし画像が左上に表示されていますがこちらもOFFにしています。

ストリーミングエンドポイントが開始されていないと再生できないので注意してください。
MediaServiceのストリーミングエンドポイントからブレードを開いていくとストリーミングユニットの設定画面に遷移できます。
ストリーミングユニットが開始していることとユニットが1以上稼働していることを確認してください。

サンプルサイトの利用方法

Azure Media PlayerアカウントKEYの設定

WebConfigの下記のKeyにAzure Media Serviceのアカウント名とアカウントkeyを設定します。

これで設定は完了なので実行してみてください。

Azure Media Playerの埋め込み

Azure Media Playerの情報は下記を参照してください。

• Azure Media Player

Azure Media playerの実装はきわめて簡単です。
ヘッダーにCSSとJSのリンクを記載してボディ部にvideoタグを記載するだけです。

ヘッダーに下記のCSSとJSを追加します。

<link href="//amp.azure.net/libs/amp/1.8.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/1.8.0/azuremediaplayer.min.js" crossorigin="anonymous"></script>

HTMLにはvideoタグで記載します。

<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>
    <source src="<MediaServicesのコンテンツのlocatorURL>" type="application/vnd.ms-sstr+xml" />
    <p class="amp-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
    </p>
</video>

サンプルソースではコンテンツ一覧で選択した動画を再生するため、選択した動画のURLを動的にvideoタグのsrcに設定しています。

HTMLとしてレンダリングするとvideoタグの部分が下記の様に生成されてプレイヤーとして表示されます。

詳細な設定を行えばアダプティブビットレートの選択やクローズドキャプション(字幕)の設定、トリックプレイの追加など色んな事が出来ます。プラグインも豊富に取り揃えてあるにもかかわらず無料なのがありがたいですね。

まとめ

Azure Media Service、Azure Media Player、ASP.NET MVCを組み合わせることによって簡単に動画配信サイトを作成することができます。サイト自体もAzureにデプロイしてしまえば環境もワンストップに構築できるためハードルはかなり下がると思います。

今のところ数あるクラウドの中でもデプロイするサーバからコンテンツのエンコード、配信(CDN含む)、再生用プレイヤーまで提供しているのはAzureのみです。ASP.NETとの親和性も高いので小規模～大規模の動画配信サイトの構築検討をする時は選択肢の一つに入れる事をお勧めします。

注意：Azure Media Serviceは費用がそこそこかかるサービスなので用法・容量を守って適切に利用しましょう。