Azure Storage の静的 Web サイトで、動画再生時にシークできなかった件

Azure Storage の静的 Web サイトで、動画再生時にシークできなかった件

Azure Storage 上に動画ファイルを置き、それをウェブサーバーから参照した際に、動画のシークができなかったので、その時のメモを記載します。

当初の構成図はこちら。

Web Apps 上にページを作成し、ページ内では HTML5 の video タグを使って動画ファイルを https 参照。その動画ファイルは Azure Storage 上の静的 Web サイト上にあり、これで万事うまく行く予定でした。

しかし実際にやってみたところ、動画は正しく問題なく表示・再生されるのですが、シーク(再生位置を指定してそこから再生する行為)ができない。

再生位置を真ん中にもってきても、シークされず、再度頭から再生されてしまう。

これは困ったと。動画ファイルが良くないのか、Video タグに設定が足りないのか、Web サーバーが良くないのか、といろいろ考え、Web サーバーが原因だとあたりを付け、CDN を噛ませてみました。

Azure Storage → Blob service → Azure CDN に行き、「新しいエンドポイント」という項目から、CDN を追加する設定を行います。

「価格レベル」は、基本はどれも同じような価格ですので、Microsoft か Verizon か Akamai かをお好みで選択します(今回は標準 Microsoft を選択)

「CDN エンドポイント」はアクセスする際の URL に含まれる文字列になります。samplecnd と指定した場合は、アクセスする際の URL は https://samplecnd.azureedge.net となります。

「配信元のホスト名」では Blob と 静的 Web サイトが選択できるので、静的 Web サイトを選択します。

作成ボタンを押し、数分すると CDN のエンドポイントが作成され、アクセスできるようになります。

静的 Web サイト上で https://sampleweb.blob.core.windows.net/$web/sample.mp4 という URL だったファイルは、CDN 上では /$web の階層がなくなり、https://samplecnd.azureedge.net/sample.mp4 という URL 構造になるので注意です。

CDN を導入したあとはこんな感じの構成図になります。

Azure Storage 上の動画をAzure Web Apps上のページからCDNを通じて参照

その結果ですが、問題なくシークができるようになりました。

現在多くの Web サーバーではファイルをダウンロードする際など、ダウンロードの開始位置を指定できるようになっていますが(いわゆるレジューム機能)、Azure Storage の 静的 Web の機能では、こちらの機能が付いていないという事なのでしょう。

一方、CDN は基本的なウェブサーバーの機能を備えているため、シークという「動画ファイルのダウンロード開始位置指定」に対応しているという事なのでしょう。

もちろん CDN は有償ですので、無償の Cloudflare なんかでも良いと思います。

というわけで、「Azure Storage の静的 Web 上に置いた動画ファイルは、CDN を利用するとシークができるようになる」という事例でした。