微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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技术处理比较简单,代码

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。