iOS和字节范围的视频流无法正常工作

时间:2017-02-08 06:11:47

标签: ios html5 video-streaming asp.net-web-api2 video.js

目前有一种情况,即iOS(10.2.1)不想在HTML视频元素中请求具有字节范围的视频 - 它希望在开始播放之前下载整个视频。 当然,这对于大型视频文件来说是荒谬的,并且在4G连接上 - 有没有人遇到过这个问题?

使用Web API 2流式传输内容 -

            string mapped = HostingEnvironment.MapPath(vmApplication.Instance.VideoPath);
            string filename = Path.Combine(mapped, name);
            string ext = System.IO.Path.GetExtension(filename)?.ToLower().Trim('.');
            string contentType = MimeMapping.GetMimeMapping(filename);
            switch (ext)
            {
                case "webm": contentType = "video/webm"; break;
                case "mp4": contentType = "video/mp4"; break;
                case "ogg": contentType = "video/ogg"; break;
            }
            MediaTypeHeaderValue _mediaType = MediaTypeHeaderValue.Parse(contentType);


            FileStream fs = new FileStream(filename, FileMode.Open, FileAccess.Read);
            if (Request.Headers.Range == null)
            {
                Request.Headers.Range = new RangeHeaderValue(0, null);
            }
            try
            {

                HttpResponseMessage partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
                ByteRangeStreamContent content = new ByteRangeStreamContent(fs, Request.Headers.Range, _mediaType, VIDEOBUFFER);
                partialResponse.Content = content;
                return partialResponse;
            }
            catch (InvalidByteRangeException invalidByteRangeException)
            {
                return Request.CreateErrorResponse(invalidByteRangeException);
            }

HTML元素非常基本,使用videojs

    <video id="video-1" controls preload="none" data-setup='{ "fluid": true }' poster="@Url.Content("~/Content/images/poster/video-1.jpeg")" class="video-js vjs-default-skin vjs-big-play-centered">
        <source src="@Url.RouteUrl("DefaultApi",new {httproute = "", id = "File", controller = "Video", name = "video-1.webm" })" type='video/webm' />
        <source src="@Url.RouteUrl("DefaultApi",new {httproute = "", id = "File", controller = "Video", name = "video-1.mp4" })" type='video/mp4' />
        <source src="@Url.RouteUrl("DefaultApi",new {httproute = "", id = "File", controller = "Video", name = "video-1.ogg" })" type='video/ogg' />
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>

对此没有运气,任何帮助将不胜感激

1 个答案:

答案 0 :(得分:1)

FFmpeg有一个选项(-movflags + faststart)来预渲染视频文件并在加载时播放。检查您的转换器是否有类似选项。

您可以尝试preload =&#34; auto&#34;或预加载=&#34;元数据&#34;

另外,检查http请求和响应头是否包含Range参数。如果请求和响应没有,则表示字节范围上的IIS设置错误。

希望它有所帮助。