关于前端video标签视频无法拖动进度条快进问题(Django)

因为后端返回的是视频的文件流，并不是视频文件地址。后端返回流的时候要为header设置一些参数，否则部分浏览器会出现问题(如Google Chrome...)。

django中常用返回文件流写法：

class VideoAPIView(APIView):"""视频视图  - 参数位置：查询参数- 请求参数：- 路径参数：- `id`: 文件id 必传- 成功返回参数：```文件下载到本地```- 失败返回参数：```{"rtCode": 0,"rtMsg": "异常信息","rtData": ""}```"""def get(self, request, file_info_id):try:contents_post = {"query": {"match": {"_id": file_info_id}},"script": {"source": "ctx._source['visits_nums'] = ctx._source['visits_nums']+1"}}elasticsearch.update_by_query(index=constants.ELASTICSEARCH_INDEX, body=contents_post)fileinfo_obj = models.FileInfo.objects.filter(file_info_id=file_info_id, delete_flag=FileInfo.DeleteFlagEnum.NOT_DELETE.value, file_type=FileInfo.FileTypeEnum.VIDEO.value)video_name = fileinfo_obj.first().file_urlexcept models.FileInfo.DoesNotExist:raise exceptions.ValidationError("数据不存在")photo_path = constants.VIDEO_PATHfile_url_path = os.path.join(photo_path, video_name)file_size = os.path.getsize(file_url_path)response = FileResponse(open(file_url_path, 'rb'))response['Content-Length'] = str(file_size)response['Content-Type'] = 'application/octet-stream'response['Content-Disposition'] = "attachment; filename={}".format(urlquote(video_name))return response

这么写对于返回视频文件流，前端使用video标签展示时，就会出现部分浏览器无法拖动进度条快进问题。

解决：在返回的header中添加Content-Range和Accept-Ranges参数

class VideoAPIView(APIView):"""视频视图- 参数位置：查询参数- 请求参数：- 路径参数：- `id`: 文件id 必传- 成功返回参数：```文件下载到本地```- 失败返回参数：```{"rtCode": 0,"rtMsg": "异常信息","rtData": ""}```"""def get(self, request, file_info_id):try:contents_post = {"query": {"match": {"_id": file_info_id}},"script": {"source": "ctx._source['visits_nums'] = ctx._source['visits_nums']+1"}}elasticsearch.update_by_query(index=constants.ELASTICSEARCH_INDEX, body=contents_post)fileinfo_obj = models.FileInfo.objects.filter(file_info_id=file_info_id, delete_flag=FileInfo.DeleteFlagEnum.NOT_DELETE.value, file_type=FileInfo.FileTypeEnum.VIDEO.value)video_name = fileinfo_obj.first().file_urlexcept models.FileInfo.DoesNotExist:raise exceptions.ValidationError("数据不存在")photo_path = constants.VIDEO_PATHfile_url_path = os.path.join(photo_path, video_name)file_size = os.path.getsize(file_url_path)response = FileResponse(open(file_url_path, 'rb'))response['Content-Length'] = str(file_size)response['Content-Type'] = 'application/octet-stream'response['Content-Range'] = f'bytes 0-{str(file_size)}/{str(file_size)}'response['Accept-Ranges'] = 'bytes'response['Content-Disposition'] = "attachment; filename={}".format(urlquote(video_name))return response

关于Content-Range参数

用于响应头中，在发出带 Range 的请求后，服务器会在 Content-Range 头部返回当前接受的范围和文件总大小。一般格式：

Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth]

例如：

Content-Range: bytes 0-499/22400

0－499 是指当前发送的数据的范围，而 22400 则是文件的总大小。

而在响应完成后，返回的响应头内容也不同：

HTTP/1.1 200 Ok（不使用断点续传方式）
HTTP/1.1 206 Partial Content（使用断点续传方式）

关于前端video标签视频无法拖动进度条快进问题(Django)相关推荐

uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码一 , template中 <video id="myVide ...
video视频标签怎么禁止用户拖动进度条快进
昨天经理给我一个需求 , 让我查一下h5播放视频怎么禁止用户快进, 然后刚刚搜了下, 实现了出来,代码如下 , 效果就是我点进度条想快进的话 , 会强制退回去, 这样用户就不能快进了 <body ...
异常：谷歌浏览器video标签播放视频不能拖动进度条
谷歌浏览器video标签播放视频不能拖动进度条当前端video的src不是直接使用视频文件的地址,而是通过后台下载接口返回文件流时,后台返回流因为没为response的header设置一些参数,会在 ...
直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...
html如何设置视频不能拖动,video标签播放视频不能拖动进度条(示例代码)
因为你的video的src不是直接使用视频文件的地址,而是通过后台接口返回文件流,后台返回流的时候没为response的header设置一些参数,否则会在部分浏览器有问题 String rangeSt ...
【网页上视频无法拖动进度条，如何进行加速播放操作以及网页失焦后如何可继续播放】
面对网页视频无法加速时如何进行加速播放遇到一 zhengzhi 刷题任务时 ,发现无法拖动进度条,也没有加速播放并且鼠标一失焦就会自动暂停时,让我乖乖看完是不可能,因此找了一个解决方案快速完成该任务 ...
JS video 禁止拖动进度条
需要实现一个效果,视频加载的过程中禁止拖动进度条快进. 开始呢我想着把控件禁掉,自动播放解决. <video id="video" src="http://kuan ...
video播放器禁用or启用拖动进度条
做视频教育网站客户提出一个需求: 视频学习完毕时,在观看视频能够拖动进度条.未观看完毕时,禁止拖动视频进度条,只能倍速播放; 用的插件的 videojs一开始用的是 disableProcess.j ...
【Android FFMPEG 开发】FFMPEG 视频播放进度控制 ( 显示播放进度 | 拖动进度条播放 )
文章目录 I . FFMPEG 播放进度控制 II . FFMPEG 播放视频 ( 效果展示 ) III . FFMPEG 获取视频时长 IV . FFMPEG 视频播放进度获取 V . FFMPEG ...

关于前端video标签视频无法拖动进度条快进问题(Django)

关于前端video标签视频无法拖动进度条快进问题(Django)相关推荐

最新文章

热门文章