chrome浏览器mp4视频流无法进行拖放或者拖放以后要重头进行播放

适用于mp4视频流无法通过URL作为静态内容返回的场景。

环境:

  1. 服务端 .Net MVC。
  2. 客户端 Chrome浏览器
  3. 播放环境 Video原生标签
  4. MP4物理路径无法通过IIS请求到,需通过程序读取到内存然后返回。(如果这个MP4是静态内容,不需要程序处理即IIS直接处理,则一般不会有这个问题)

问题:无法进行拖放或者拖放以后要重头进行播放。

故障原因:与Video标签适配的请求未被响应。

如何做:

  1. Chrome浏览器默认请求会在 Header 添加一个Range如下:服务器要做的就是响应这个Header

      Range:             bytes=0-
    
  2. 服务器接收到这个Header以后,响应的Header如下,同时需要设置状态码为206:

     Accept-Ranges:     bytes
     Content-Length:    2097152
     Content-Range:     bytes 0-2097151/38696534
    

    其中需要说明的是,这里服务端设置了响应2MB(210241024=2097152字节)的分段加载,返回的数据流则是文件流索引0-2097151的内容,因为文件流索引是从0开始的。38696534 是视频文件的总长度。

帖服务器端响应代码:

public ActionResult Video(Guid id)
 {
     //数据库存储的文件路径
     var archive = ManagerFactory.ArchiveManager.GetVideoArchive(id);
     //物理绝对路径
     var path = Server.MapPath("~/" + archive.Path);

     //设置响应头
     HttpContext.Response.Headers.Add("Accept-Ranges", "bytes");
     
     //判定是否响应Chrome中的Range请求
     var rangeQuery = HttpContext.Request.Headers["Range"];
     if (rangeQuery.IsNotNullAndNotEmpty())
     {
         //startIndex 与 endIndex 是索引值,0开始的,注意在与 Length 比较的时候 Length-1
         var startIndex= 0;
         //视频每节长度为2MB
         var length = 2 * 1024 * 1024;
         var range = rangeQuery.Split('=')[1].Split('-');
         startIndex= range[0].ParseToInt();
         var endIndex = startIndex + length - 1;
         var fileLength = (int)archive.Length;

         //是否指定了索引终结点
         if (range[1].IsNotNullAndNotEmpty())
         {
             endIndex = range[1].ParseToInt();
         }
         if (endIndex <= startIndex )
         {
             endIndex = startIndex + length - 1;
         }
         if (endIndex > fileLength - 1)
         {
             endIndex = fileLength - 1;
         }
         
         //关键设置
         HttpContext.Response.Headers.Add("Content-Range", $"bytes {startIndex}-{endIndex}/{archive.Length}");
         //关键设置
         HttpContext.Response.StatusCode = 206;

         //按照索引读取文件流
         using (var fs = System.IO.File.OpenRead(path))
         {
             var buffer = new byte[endIndex - startIndex + 1];
             fs.Position = startIndex ;
             fs.Read(buffer, 0, buffer.Length);
             return File(buffer, archive.ContentType);
         }
     }
     
     //如果未设置则返回整个文件
     return File(path, archive.ContentType);
 }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章