web-dev-qa-db-ja.com

HTML5-大きな.mp4ファイルをストリーミングする方法

私は、20MBの.mp4ビデオを読み込む非常に基本的なhtml5ページをセットアップしようとしています。ブラウザは、ビデオの最初の部分を再生して残りをストリーミングするのではなく、すべてをダウンロードする必要があるようです。

この投稿 は検索中に見つけた最も近いものです...私はハンドブレーキとデータゴーラウンドの両方を試してみましたが、どちらも違いはありませんでした：

これを行う方法、または可能かどうかについてのアイデアはありますか？

私が使用しているコードは次のとおりです。

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>
html5videostreaminglarge-files
73
longda
  1. moov（メタデータ）がmdat（オーディオ/ビデオデータ）の前にあることを確認してください 。これは、「ファストスタート」または「Web最適化」とも呼ばれます。たとえば、 Handbrakeには「Web最適化」チェックボックスがあります 、および ffmpeg および avconv には出力オプション-movflags faststartがあります。
  2. Webサーバーが正しいContent-Type（video/mp4）を報告していることを確認してください。
  3. Webサーバーがバイト範囲リクエストを処理するように設定されていることを確認してください 。
  4. Webサーバーがmp4ファイルの圧縮に加えてgzipを適用していないか、圧縮を圧縮していないことを確認してください。

curl -I http://yoursite/video.mp4を使用するか、ブラウザの開発者ツール（ Chrome 、 Firefox ）を使用して、Webサーバーから送信されているヘッダーを確認できますキャッシュされます）。 HTTP応答ヘッダーには、Content-Type：video/mp4およびAccept-Ranges：bytes、およびなしContent-Encoding：。

135
mark4o

これは、バイト範囲（部分的な要求）を持つビデオファイルを提供するC＃（MVC）でWeb APIコントローラーを作成するために使用したソリューションです。部分的なリクエストにより、ブラウザは、ビデオ全体をダウンロードするのではなく、再生に必要なだけビデオをダウンロードすることができます。これにより、はるかに効率的になります。

これは最近のバージョンでのみ機能することに注意してください。

var stream = new FileStream(videoFilename, FileMode.Open, FileAccess.Read , FileShare.Read);

var mediaType = MediaTypeHeaderValue.Parse($"video/{videoFormat}");

if (Request.Headers.Range != null)
{
    try
    {
        var partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
        partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, mediaType);

        return partialResponse;
    }
    catch (InvalidByteRangeException invalidByteRangeException)
    {
        return Request.CreateErrorResponse(invalidByteRangeException);
    }
}
else
{
    // If it is not a range request we just send the whole thing as normal
    var fullResponse = Request.CreateResponse(HttpStatusCode.OK);

    fullResponse.Content = new StreamContent(stream);
    fullResponse.Content.Headers.ContentType = mediaType;

    return fullResponse;
}
4
Chris