1

MVC3とflowplayerを使用して、次のマークアップのビデオファイルを取得するように設定されたビデオプレーヤーがあります。

<div id="video">
    <div id="video-viewport">
      <!-- The data-ratio is a decimal number represeting the height of the video in proportion to the width -->
      <div class="flowplayer" data-swf="http://releases.flowplayer.org/5.1.1/flowplayer.swf"
        data-ratio="0.417" data-engine="html5" data-keyboard="true" data-native_ipad_fullscreen="true"
        data-volume="0.6">
        <video>
       <!-- By default Flowplayer attempts to use HTML5 video and if it's not
       supported then Flash (9.0+) and MP4 is used. MP4 is enough for
       complete browser support but providing WebM and/or OGG gives you
       broader support for HTML5 video which is the preferred technology. -->
     <!-- MP4 gives a complete cross browser support with the aid of Flash -->
     <source type="video/mp4" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMp4Video.Id })"/>
     <!-- WEBM gives HTML5 video support for the latest Firefox, Chrome and Opera browser -->
      <source type="video/webm" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMVideo.Id })"/> 
     <!-- OGG gives HTML5 support for older versions of Firefox and Opera -->
      <source type="video/ogv" src="@Url.Action("GetVideo", "Video", new { id = Model.OgvVideo.Id })"/> 
      </video>
      </div>
    </div>
  </div> <!--/video-->

コントローラでは、ビデオを返すこのメソッドがあります。

    public ActionResult GetVideo(string id) {
                ...
        var cd = new System.Net.Mime.ContentDisposition {
        Inline = false
    };
    FileInfo info = new FileInfo(path);
    Response.AppendHeader("Content-Disposition", cd.ToString());
    return new RangeFilePathResult(MimeType, info.FullName, info.LastWriteTimeUtc, info.Length); 
 }

RangeFilePathResultは、部分的な応答を返す際の命の恩人であり、これはすべてFirefoxとIEで正常に機能しますが、Chromeでは頻繁にエラーが発生します。

「httpヘッダーが送信された後、サーバーはステータスを設定できません」。

プレーヤー自体がクラッシュし、ページに次のエラーが表示されます。

html5:ビデオが正しくエンコードされていません

私はまだ部分的な応答に頭を悩ませようとしていますが、これはRangeFileResultが各部分的な応答でステータスコード206を設定するためである可能性がありますか?それとも私がここで見逃しているものは他にありますか?

編集:RangeFileResultコードをデバッグし、Chromeの[ネットワーク]タブも調べると、コードが次の行に到達するとすぐに、コントローラーメソッドへのリクエストがステータスが保留中の部分的な応答を返すことに気付きます。

context.HttpContext.Response.Flush();

これには10秒以上の遅延があるようですが、これが完了すると、応答のステータスが206に変わります。ただし、ビデオの再生中に、ステータスが再びキャンセルに変更され、これが

html5:ビデオが正しくエンコードされていません

ビデオプレーヤーにメッセージが表示されます。

Edit2:私が得ている応答は次のとおりです(3つの応答、1番目と3番目はキャンセルされ、2番目は206ステータスです:

リクエスト

URL: http://localhost:64729/Video/GetVideo/24
Method: GET
Status Code: 206 Partial Content

リクエストヘッダー

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:.ASPXAUTH=BD5B9748E6985F5659B56289A5543C11CACBF1602AFFD5D4335453560988B870F2543269809401D13EE9F12EFBAC2D4CE0322B5F826871B9968B3D2986C01E35C536B28B5EC24E8E4F631D094B0DBEFF76DA84DA7CCC753E06C38C0FA36A858AC87548099BD23D4BE9B80434970A542489EC5E5F4543A9C98CA573F196DCBFE1B8CC18C10AE1AFEB0E4E899C6CA4DEFC59138E170954016DCB9C007FDC7C2B2950436E24AA5FF9C0888822626C9AE01C07A98F317A9499F0E9D5E61434F959E9;ASP.NET_SessionId=o112vzki5owvbptr4kudbdax
Host:localhost:64729
Range:bytes=0-
Referer:http://localhost:64729/Video/Index/3
User-Agent:Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

応答ヘッダー

Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:7362920
Content-Range:bytes 0-7362919/7362920
Content-Type:video/mp4
Date:Tue, 15 Jan 2013 12:55:24 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0

リクエスト

URL: http://localhost:64729/Video/GetVideo/24
Method: GET
Status Code: 206 Partial Content

リクエストヘッダー

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:.ASPXAUTH=BD5B9748E6985F5659B56289A5543C11CACBF1602AFFD5D4335453560988B870F2543269809401D13EE9F12EFBAC2D4CE0322B5F826871B9968B3D2986C01E35C536B28B5EC24E8E4F631D094B0DBEFF76DA84DA7CCC753E06C38C0FA36A858AC87548099BD23D4BE9B80434970A542489EC5E5F4543A9C98CA573F196DCBFE1B8CC18C10AE1AFEB0E4E899C6CA4DEFC59138E170954016DCB9C007FDC7C2B2950436E24AA5FF9C0888822626C9AE01C07A98F317A9499F0E9D5E61434F959E9;ASP.NET_SessionId=o112vzki5owvbptr4kudbdax
Host:localhost:64729
Range:bytes=7339303-
Referer:http://localhost:64729/Video/Index/3
User-Agent:Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

応答ヘッダー

Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:23617
Content-Range:bytes 7339303-7362919/7362920
Content-Type:video/mp4
Date:Tue, 15 Jan 2013 12:55:24 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0

リクエスト

URL: http://localhost:64729/Video/GetVideo/24
Method: GET
Status Code: 206 Partial Content

リクエストヘッダー

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:.ASPXAUTH=BD5B9748E6985F5659B56289A5543C11CACBF1602AFFD5D4335453560988B870F2543269809401D13EE9F12EFBAC2D4CE0322B5F826871B9968B3D2986C01E35C536B28B5EC24E8E4F631D094B0DBEFF76DA84DA7CCC753E06C38C0FA36A858AC87548099BD23D4BE9B80434970A542489EC5E5F4543A9C98CA573F196DCBFE1B8CC18C10AE1AFEB0E4E899C6CA4DEFC59138E170954016DCB9C007FDC7C2B2950436E24AA5FF9C0888822626C9AE01C07A98F317A9499F0E9D5E61434F959E9;ASP.NET_SessionId=o112vzki5owvbptr4kudbdax 
Host:localhost:64729
Range:bytes=48-
Referer:http://localhost:64729/Video/Index/3
User-Agent:Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

応答ヘッダー

Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:7362872
Content-Range:bytes 48-7362919/7362920
Content-Type:video/mp4
Date:Tue, 15 Jan 2013 12:55:24 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0
4

2 に答える 2

1

いくつかの集中的なテスト(サンプルプロジェクトに感謝​​)の後、Chromeはmp4形式でいくつかの問題を抱えているようです。

この状況を修正するには、最初の形式としてwebmを移動して、Chromeがmp4ではなくそれを取得するようにするだけで十分です(IEはmp4にスキップするため、これも機能します)。

<div id="video">
    <div id="video-viewport">
        <div class="flowplayer" data-swf="http://releases.flowplayer.org/5.1.1/flowplayer.swf" data-ratio="0.417" data-engine="html5" data-keyboard="true" data-native_ipad_fullscreen="true" data-volume="0.6">
            <video>
                <source type="video/webm" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMVideo.Id })"/> 
                <source type="video/ogv" src="@Url.Action("GetVideo", "Video", new { id = Model.OgvVideo.Id })"/>
                <source type="video/mp4" src="@Url.Action("GetVideo", "Video", new { id = Model.WebMp4Video.Id })"/>
            </video>
        </div>
    </div>
</div>
于 2013-01-15T13:22:50.033 に答える
0

あなたはこれを試すことができます、それは私の問題を修正しました。

<script>
    flowplayer.conf={
        engine:'flash'
    };
</script>
于 2013-04-26T09:18:28.183 に答える