Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

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

概要

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

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

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

サンプルサイトの概要

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

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

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

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

image

AzureMediaServiceのアセット一覧

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

image

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

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

image

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

image

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

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

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

image

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

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タグの部分が下記の様に生成されてプレイヤーとして表示されます。

image

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

まとめ

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

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

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

kingkinoko
プログラムを弄りたいPMです。
http://blog.kokoni.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした