Html5 データストリームによる動画再生

PC、Android、IOS環境に対応したH5ページで、サーバーサイドの動画ファイルをデータストリーミングで再生する方法を紹介します。

H5ページでは、以下の方法で動画を再生することができます。 <ビデオ タグを使用します。一般的な方法は以下の通りです。

\n

src は、再生する動画の URL を、特定の動画ファイルへのパスとして指定します。アクセス リクエストを getVideo.do?fileId=xxx に変更すると、サーバーがバイト ストリームを返す際に、バックエンドの実装に変更が必要になります。

一般的な方法は、ローカルファイルを読み込んでからレスポンスに書き込むというもので、コードの実装は以下の通りです。

wikicorpus/__init__.py

この方法は、PCやAndroid携帯では正常に表示できますが、ios携帯ではSafari経由で表示できません。iosでは現在、ブレークポイントに関連するメッセージ付きのリクエストヘッダで動画を取得します。IOSの場合、一度に全部のファイルをリクエストするのではなく、通常は0-1バイトを先にリクエストし、リクエストヘッダの"range"フィールドに: range:'bytes=0-1' と記述しているとのことです。
そして、サーバーはrangeの要件を満たす必要があります。rangeフィールドを解析し、rangeフィールドの要件に従って、対応するデータを返します。

レスポンスヘッダには、少なくとも3つのフィールドが含まれていなければならない。

• Content-Type。video/mp4", "video/ogg", "video/mov" などのように、動画の形式を指定する。
• Content-Range。フォーマットは "bytesです。 <スタート - <終了 / <合計 ここで、startとendはリクエストヘッダのrangeフィールドに対応しなければならず、totalはファイルの合計サイズである。
• Content-Length: 返されたバイナリ長。

ブレークポイントは以下のように実装されています。

ValueError: source code string cannot contain null bytes

H5ページです。

conda install -c conda-forge typeguard