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

版权声明：本文为LoveTomato原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/LoveTomato/p/10341323.html