最近在项目中需要用video标签查看视频,但是在实际操作过程中遇到了N多的坑,苦不堪言。闲话不多少,直奔主题。
实际上不管是什么浏览器,在使用video标签的时候使用的都是断点续传的操作,所以这个时候我们就要看你的接口是否支持断点续传。而断点续传的关键就是在请求头里面是有一个"Range"的参数,其所携带的值就是要返回的内容区间
来看看关键:
如果要传输视频,必须要解析"Range"字段,然后安装range字段的要求返回对应的数据。同时,在响应头里面则必须有"Content-Range","Content-Length","Content-Range"这三个字段。
Content-Range:必须明确指定视频的格式。有"video/mp4","video/ogg","video/mov"等等,网上都可以搜索的到。
Content-Length:指定返回的二进制长度,这个字段在Chrome上可以不写,会自动添加上,不过不建议这样做。保险起见就是不管是什么浏览器都手动给添加上,确保万无一失。
Content-Range:格式是"bytes start-end/total",其中,start和end必须对应请求头内的"Range"字段,total则是整个文件的大小,不是返回数据的长度,这点不要搞混了。
实际应用时的几个坑:
1、Chrome在第一次请求的时候是没有Range字段的,所以这个时候什么都不需要操作,只需要把文件传回去就好了。但是Chrome在第二次续传的时候会直接一次性的把文件全部拿回去,"Range"字段携带的是"bytes=0-",所以假如我们的文件长度是1000,那我们的响应头内的这三个字段。我们正常的文件传输协议肯定不是这样的,Chrome在这里偷了个懒。开始我也是这么认为的,但是当我在实际应用过程中传了一个较大的视频后发现并不是全部,实际上Chrome虽然请求的是"0-",安装我们的处理,传回去的请求头和请求数据都没有问题,但是实际上是有长度限制的,所以还是会再次发送第三次断点续传。
2、safari在第一次发送请求时就会带Range字段,值是"bytes=0-1"。获取2个字符,然后再进行后续的请求。
3、Range字段携带的区间值我们可以理解为下标,左右都是闭区间。所以如果是"0-1",那我们的响应头字段"Content-Length"就是2,"Content-Range"就是"bytes 0-1/1000",如果是chrome的"0-",那就是"bytes 0-999/1000"。
4、响应码。网上众说纷纭,反正就是两个200、206。206其实就是断点续传的状态码。最后我自己的实验,也在项目中用了,可以在开始时设置200, 如果带的有Range字段的话就改成206, 亲测真实有用。
5、响应数据。响应回去的数据一定要进行切片处理。之前在网上查的时候,都只说了请求头和响应头,没有提到具体的数据或者就是说每次都把整个视频全返回去,依靠响应头里面的区间信息利用标签的机制自动去截取。结果显而易见,总有各种各样的问题。但是我们在对视频流进行切片处理的时候一定不要忘了从start开始,到end+1结束。
总结:
原理就是这样,具体在实际使用过程中可能还会有一个特殊情况,就只能个人酌情处理了,不过应该都不会太难,最后,源码奉上。
class Video(Resource):
# @jwt_required
def get(self, video_id):
try:
range_value = request.headers.get("Range", None)
video = Videos.query.filter_by(id=video_id).first()
if not video:
raise VideoError(err_msg="No search video")
data = current_app.config['MINIO'].get_files(video.key, video.bucket)
data_length = len(data)
start = 0
end = data_length - 1
headers = {"Content-disposition": 'inline; filename=%s' % video.key}
status_code = 200
if range_value:
status_code = 206
range_re_obj = re.compile(r'bytes=([0-9]+)\-(([0-9]+)?)')
result = re.match(range_re_obj, range_value)
if result:
start_str = result.group(1)
end_str = result.group(2)
start = int(start_str)
if end_str:
end = int(end_str)
else:
end = data_length-1
headers["Content-Length"] = str(end - start + 1)
headers["Accept-Ranges"] = "bytes"
headers["Content-Range"] = "bytes %d-%d/%d" % (start, end, data_length)
headers["Connection"] = "keep-alive"
response = Response(data[start:end + 1], mimetype="video/mp4", headers=headers)
response.status_code = status_code
return response