Azure Blobにアップロードしたmp4の動画をChromeでもストリーミング再生しながらシークさせたい。

趣味でnamelessという写真のポートフォリオサイトを作ってます。

name-less.space

asp.net core mvc + azure blob + cloudflareの超軽量アーキテクチャで公開サイトと管理サイトを実装してます。
そのへんの詳細はここから。
c-mitsuba.hatenablog.com

namelessは写真なので基本的にjpgを扱っているのですが、今回はこれがもし動画だったら？という例え話の上でのできごと。

動画も同じようにblobに置けばよいのでは？htmlのimgタグの代わりにvideoタグでよいのでは？
ドキュメントにも動画のストリーミング配信に対応してるって書かれてるし。
learn.microsoft.com

Azure Media Services？知らない子ですね....

というわけで素直にAzure Blobにパブリックフォルダを作って、素直にvideoタグに読み込ませます。

vscodeでササッと書いて、Live Serverで起動するとこんなかんじ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="text-center">
        <video src="https://mitsubapoc.blob.core.windows.net/public/dji_mimo.mp4" controls class="w-50"></video>
    </div>
</body>
</html>

youtu.be

動いたと思ったのにシークできない.....。

今日はこれを解決したい話です。
ちなみにSASがついていればシークできます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>Document</title>
  </head>
  <body>
    <div class="d-flex">
      <div class="m-2">
        <h1>SASなし</h1>
        <video
          src="https://mitsubapoc.blob.core.windows.net/public/dji_mimo.mp4"
          controls
          class="w-100"
        ></video>
      </div>
      
      <div class="m-2">
        <h1>SASあり</h1>
        <video
          src="https://mitsubapoc.blob.core.windows.net/public/dji_mimo.mp4?sv=2023-01-03&st=2024-12-06T14%3A06%3A30Z&se=2024-12-07T14%3A06%3A30Z&sr=b&sp=r&sig=AP8T%2BTsCJXWWpLScn%2FsrLa0IBbOV%2B6eaSyNNrzDpgDU%3D"
          controls
          class="w-100"
        ></video>
      </div>
    </div>
  </body>
</html>

youtu.be

ちなみにちなみに、safariならどちらも気にせずシークできます。
どうやら調べてみるとこういうことらしく、サーバー側でrange requests対応が必要らしい。
suzuki-navi.hatenablog.com

Azure BlobのRest APIにも実はいろいろとバージョン（日付管理されてる）があって、
learn.microsoft.com

SASが付くとそこそこ新しいバージョンのBlob 2023-01-03でファイルが配信される。
どうやら?sv=2023-01-03で指定できているけど、SAS認証しないそのままのURLだとバージョン指定ができない。

一方でデフォルトのURLでは、2009-09-19で配信される。

つまり、いつぞやのAzure Blobのバージョンからrange requestsに対応されたみたい。
リクエストヘッダーに x-ms-version をつけて指定してもいいんだけど、それだとわざわざfetch apiを叩いてどーこーしないといけなくてめんどう。
learn.microsoft.com

とはいえ普通のURLリクエストのGet引数で指定するみたいな方法はないみたい。

というわけで、ストレージアカウントからAPIのバージョン指定をしてみる。
散々探した結果、Azureポータルからはできなくて、Cloud Shellを立ち上げてPowerShellから処理しないといけないみたい。
コマンドのドキュメントはこちら。
learn.microsoft.com

1. Cloud Shellを立ち上げるには、ヘッダーのコンソールアイコンから。

2. 今回はPowerShellを選択。

3. 特に保存したいものもないので、ストレージアカウントは不要です。

4. APIバージョンの指定範囲はストレージアカウントレベルになるみたいなので、該当のストレージアカウントの接続文字列をコピーしてくる。

5. コマンドはこんなかんじ。実際は4でコピーしてきたのを「すとれーじあかうんとのこねくしょんすとりんぐす」にコピーしてね。
DefaultEndpointsProtocol=うにゃうにゃになるはず。
今回のケースでは2019-02-02のバージョンで要件を満たすのだけど、特にわざわざ古いバージョンを使う理由もないので、現時点で最新の2024-11-04を使うことにする。

$ctx = New-AzStorageContext -ConnectionString "すとれーじあかうんとのこねくしょんすとりんぐす"

Update-AzStorageServiceProperty -ServiceType Blob -DefaultServiceVersion 2024-11-04 -Context $ctx

6. 5のコマンドをCloud Shellに貼り付けて実行。