关键词：
因为后端返回的是视频的文件流，并不是视频文件地址。后端返回流的时候要为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_url
except models.FileInfo.DoesNotExist:
raise exceptions.ValidationError("数据不存在")
photo_path = constants.VIDEO_PATH
file_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_url
except models.FileInfo.DoesNotExist:
raise exceptions.ValidationError("数据不存在")
photo_path = constants.VIDEO_PATH
file_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)(代码片段)
因为后端返回的是视频的文件流，并不是视频文件地址。后端返回流的时候要为header设置一些参数，否则部分浏览器会出现问题(如GoogleChrome...)。django中常用返回文件流写法：classVideoAPIView(APIView):"""视频视图-... 查看详情
video标签播放视频不能拖动进度条
...题StringrangeString=request.getHeader("Range");//如果是video标签发起的请求就不会为nulllongrange=Long.valueOf(rangeString.substring(rangeString.indexOf("=")+1,rangeString.indexOf("-")));response.setHeader("Content-Type","video/mp4");res... 查看详情
html5video标签怎样禁止拖动或者点击进度条
...条的话就只能用默认进度条，默认的进度条是集合在video标签中的，这个我们无法实现不能拖动，但是可以模拟下，你可以使用让鼠标点击到视频所在的video或者div的时候无效化，原理就是鼠标选不到进度条，自然不能拖动了。... 查看详情
通过加速或跳过网页视频解决进度条无法拖动问题
加速网页视频与跳过网页视频1、加速网页视频（1）F12打开开发者工具，然后Ctrl+Shift+C检查video元素检查video元素（2）控制台输入脚本functionaccelerate()letvideo=document.querySelector(‘video’);functionplay()video.pla... 查看详情
vue实现h5video视频标签禁止快进最优(代码片段)
可以拖动滚动条但是还是松开鼠标还是停留在当前位置，如果后退的话还是可以快进到最快的位置，这点还是比较优化较好的<template><videoref="video"@timeupdate="timeupdate"></template><script>... 查看详情
as3.0视频的快进有拖动条(代码片段)
packagecomimportflash.display.MovieClip;importflash.events.MouseEvent;importfl.video.FLVPlayback;importfl.video.MetadataEvent;importflash.events.AsyncErrorEvent;importflash.net.NetConnection;importfl 查看详情
javascript实现video视频进度条拖动无效
在某些时候项目中会用到video，想让用户看完视频而不是一下拖到底结束，这种时候就要实现进度条拖动失效，用户拖动时会记录拖动上一秒的currentTime，在拖动结束后返回上一秒的位置，以此实现拖动失效效... 查看详情
用java读取本地磁盘视频资源，outputstream输出的视频文件在html的video标签播放时不能点快进
一快进就从头重新开始播放，如果视频文件放tomcat目录下，可以快进播放。这怎么解呢？大佬们<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Title</title></head><body><!--controlslist="nodownload"去掉下载... 查看详情
html5新增标签video视频，实现音视频的播放暂停快进慢进倍速等操作(代码片段)
新增标签*Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式。但是div是无意义的块元素，而Html5新增的这些元素多为有意义的元素，例如header表达了头部的意思... 查看详情
腾讯视频怎么快进
参考技术A01打开腾讯视频app，任意选择一个你喜欢看的剧集，点击进入。02进入剧集播放页面后，就可以进行快进了，这里为了方便操作，我们点击全屏模式。03快进的方法有两种。进入全屏播放页面后，轻触一下屏幕，将播放... 查看详情
asp.netcore让video标签支持大于2g视频拖动播放，视频文件流支持拖动播放，不保露视频真实地址physicalfile,enablerangeprocessing
<videosrc="/video/GetVideoUrl"controls="controls"controlslist="nodownload"></ 查看详情
利用mediaplayer实现在线音频的播放（支持进度条拖动快进快退）(代码片段)
...16/MyNewAudioDemo下载项目后，运行起来，会发现音频无法播放，是因为，我项目中读音的链接是audioUrl="https://...test.mp3"之前调试的音频存放链接，指向公司 查看详情
asp.netcore让video标签支持大于2g视频拖动播放，视频文件流支持拖动播放，不保露视频真实地址physicalfile,enablerangeprocessing
<videosrc="/video/GetVideoUrl"controls="controls"controlslist="nodownload"></video>publicasyncTask<IActionResult>GetVideoUrl()awaitTask.Yield();// 查看详情
关于html5中video标签无法播放mp4的解决办法
1、首先先排除掉代码问题、路径问题、浏览器不支持问题等常规问题，这些问题另行百度。 <videowidth="500px"height="300px"autoplay="autoplay"><sourcesrc="D:/video/hbg.mp4"type="video/mp4"></video>2、首先我自己从网上下载的一个MP4... 查看详情
随手记录关于vedio标签浏览mp4视频不能跳转进度问题
今天在处理mp4视频浏览时候,用到了vedio标签,基本使用可以参考参考地址问题:但是加载的视频不能调整进度条,大多数文章说可以通过vartime=document.getElementById("vedio_id");//单位秒time.currentTime=60; 查看详情
关于video标签移动端开发遇到的问题，获取视频第一帧，全屏，自动播放，自适应等问题(代码片段)
最近一直在处理video标签在IOS和Android端的兼容问题，其中遇到不少坑，绝大多数问题已经解决，下面是处理问题经验的总结： 1.获取视频的第一帧作为背景图； 技术：canvas绘图 window.onload=function... 查看详情
【web前端】用video标签获取视频的时长
参考技术A用户上传视频时，要获取用户所选的视频的时长，如果太长就提示用户不能上传通过video标签来获取视频的时长 查看详情
mp4的视频打开可以播放在页面上无法打开
...都是MP4但是html中只支持H.264的编码格式，转码时只有选择关于<video>标签所支持的视频格式和编码：MP4=MPEG4文件使用H264视频编解码器和AAC音频编解码器WebM=WebM文件使用VP8视频编解码器和Vorbis音频编 查看详情