88

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

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

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

これが私が使用しているコードです：

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>
4

2 に答える 2

161
  1. moov（メタデータ）がmdat（オーディオ/ビデオデータ）の前にあることを確認してください。これは、「ファストスタート」または「Web最適化」とも呼ばれます。たとえば、Handbrakeには「WebOptimized」チェックボックスがあり、ffmpegとavconvには出力オプションがあります-movflags faststart。
  2. Webサーバーが正しいコンテンツタイプ（video / mp4）を報告していることを確認してください。
  3. Webサーバーがバイト範囲要求を処理するように構成されていることを確認してください。
  4. Webサーバーがmp4ファイルの圧縮に加えてgzipまたはdeflate圧縮を適用していないことを確認してください。

curl -I http://yoursite/video.mp4ブラウザ（Chrome、Firefox ）の開発者ツールを使用または使用して、Webサーバーから送信されているヘッダーを確認できます（ページがキャッシュされている場合はページを再読み込みします）。HTTP応答ヘッダーには、Content-Type：video / mp4とAccept-Ranges：bytesが含まれている必要があり、 Content-Encoding：は含まれていません。

于 2012-04-26T09:16:50.510 に答える
7

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

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

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;
}
于 2016-08-31T10:24:15.543 に答える