HTML5 Video播放服务端大文件

HTML5 Video

Video是html5添加的新元素,用于视频的播放,使用也特别简单

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持Video标签。
</video>

注意简单的Demo直接Copy使用可能会出现问题的,果然当movie.mp4文件过大时,会将整个文件下载下来才播放。

需求

如果视频文件太大,对Video要求:

  • 边播放,边下载
  • 可以指定位置播放

    Http 部分请求

    要满足上面的需求,首先想到Http部分请求,Http请求协议中对部分内容请求要求:
  • Http部分内容请求头部需要指定:Range:bytes=0-
  • Http响应需要指定响应头:content-range:bytes:0-、httpcode为206

让客户端和服务端遵循Http部分内容请求要求

客户端即使Video元素(刚开始自己还卡在这里,怎样才能控制Video发送部分请求),但其实Video默认为部分内容请求,也随着播放继续加载后面的视频(想想也是如果不支持也太麻烦了)
注意 video的请求为Range:bytes=startIndex-,Range的结束位置没有设定,这样请求的范围为startIndex到文件最后。但我们可以在服务端指定每次请求返回数据的大小,单位为bytes.

服务端

服务端读取请求头Range查看是否是部分请求,如果是则需要:

  • 读取相应大小的流文件,作为响应体
  • 设置响应头,如Content-Range: bytes 2293762-3342338/145108958最后的为文件的总大小
  • 设置响应返回码 206

我用的是asp.net web api技术处理比较简单,代码

猜你喜欢

转载自www.cnblogs.com/LoveTomato/p/10341323.html