Html 无法在 chrome 中寻找 html5 视频或音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10583931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
can't seek html5 video or audio in chrome
提问by toxkillfraex
I've been fiddling with the hell that is HTML5 video/audio for a couple of weeks now. Usually the reason why something failed popped up after a while, but I've been, unable to find why I get forwarding and rewinding problems in chrome.
几个星期以来，我一直在摆弄 HTML5 视频/音频。通常一段时间后会出现失败的原因，但我一直找不到为什么我在 chrome 中遇到转发和倒带问题。
Anyhow...
无论如何...
The video or audio tag is being loaded in an extjs panel when a video or audio file is requested. The files are sent as streams and they work fine in IE and firefox (after adding duration to the response header) There's an issue with safari, but it's apparently the fact that the whole site runs in HTTPS (that's being worked on right now).
当请求视频或音频文件时，视频或音频标签正在加载到 extjs 面板中。这些文件作为流发送，它们在 IE 和 firefox 中工作正常（在向响应标头添加持续时间后）Safari 存在问题，但显然整个站点在 HTTPS 中运行（现在正在处理）。
In chrome (which is my issue and is at the latest version) the video and audio loads just fine, but I'm unable to rewind or forward. When trying to seek videos just go ahead a few seconds until it reaches the end of the stream. the audio also plays just fine but trying to rewind (or forward) multiple times simply breaks the progress bar and stops the audio from playing on.
在 chrome（这是我的问题并且是最新版本）中，视频和音频加载得很好，但我无法后退或前进。尝试搜索视频时，只需前进几秒钟，直到它到达流的末尾。音频也播放得很好，但多次尝试倒带（或前进）只会破坏进度条并停止播放音频。
I'm not entirely sure what's being sent from the server, but I'm wondering if this might be caused by missing data in the response. If it's not that anything else to point me towards a fix is just as welcome. I think I've covered pretty much the whole set up and I've made sure that there's a source tag for each browser.
我不完全确定从服务器发送了什么，但我想知道这是否可能是由于响应中的数据丢失造成的。如果不是其他任何指向我修复的东西也同样受欢迎。我想我已经涵盖了几乎整个设置，并且我已经确保每个浏览器都有一个源标签。
edit:this is the code generated by the javascript for one of the files:
编辑：这是由 javascript 为其中一个文件生成的代码：
<video width="1889" height="2" preload="auto" autoplay="1" controls="1" id="videoPlayer" style="width: 1889px; height: 233px; ">
<source src="http://localhost:8080/epaServer/epa/documents/496.ds_webm?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb" type="video/webm">
<source src="http://localhost:8080/epaServer/epa/documents/496.ds_mp4?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb" type="video/mp4">
<div>Your browser doesn't support html5 video. <a>Upgrade Chrome</a></div>
</video>
I've also found that I can't seek any of the files even if I open them separately from the application.
我还发现，即使我与应用程序分开打开它们，我也无法查找任何文件。
I've tried to find more info on my own these are the headers chrome shows in the network tab:
我试图自己找到更多信息，这些是 chrome 在网络选项卡中显示的标题：
Request URL:https://localhost:8443/epaServer/epa/documents/496.ds_webm?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb
Request Method:GET
Status Code:200 OK
Request Headers
Accept:/Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb
Host:localhost:8443
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.168 Safari/535.19
Query String Parametersview URL encoded
sessionId:5616fde4-50af-43d6-a57c-f06540b64fcb
Response Headers
Cache-Control:private
Content-Length:1588816
Content-Type:video/webm
Date:Mon, 14 May 2012 14:23:02 GMT
Expires:Thu, 01 Jan 1970 01:00:00 CET
Server:Apache-Coyote/1.1
X-Content-Duration:17.31
请求地址：https://localhost:8443/epaServer/epa/documents/496.ds_webm?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb
请求方式：GET
状态码：200 OK
请求头
接受：/接受字符集：ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:identity;q=1, *;q=0
接受语言：en-US,en;q=0.8
连接：保持连接
Cookie:sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb
主机：本地主机：8443
用户代理：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.168 Safari/535.19
查询字符串参数查看 URL 编码
sessionId:5616fde4-50af-43d6-a57c-f06540b64fcb
响应头
缓存控制：私有
内容长度：1588816
内容类型：视频/webm
日期：2012 年 5 月 14 日星期一 14:23:02 GMT
到期：1970 年 1 月 1 日星期四 01:00:00 CET
服务器：Apache-Coyote/1.1
X-内容-持续时间：17.31
>
>
采纳答案by toxkillfraex
I found the reason why it's not working on this question:
我找到了它不能解决这个问题的原因：
Our server doesn't understand partial contentright now. As a result chrome is sending requests for content that doesn't get answered which in turn makes our video's and audio unseekable (and unloopable).
我们的服务器现在无法理解部分内容。因此，chrome 发送的内容请求没有得到答复，这反过来又使我们的视频和音频不可搜索（和不可循环）。
回答by Pham Duc Toan
You must handle req.headers['range'] which Chrome will send to your streaming server.
您必须处理 Chrome 将发送到您的流媒体服务器的 req.headers['range']。
Please refer to my codes below. It worked well on Chrome, Firefox, Edge and IE. I haven't test it on Safari but hopefully it also can work.
请参考我下面的代码。它在 Chrome、Firefox、Edge 和 IE 上运行良好。我还没有在 Safari 上测试过它，但希望它也能工作。
I used Sails/Nodejs backend and gridFS/mongodb database for storing Videos files as Chunks.
我使用 Sails/Nodejs 后端和 gridFS/mongodb 数据库将视频文件存储为块。
try {
let foundMetaFile = await GridFS.findOne({id: fileId});
if (!foundMetaFile) return res.status(400).json(Res.error(undefined, {message: `invalid ${fileId} file`}));
let fileLength = foundMetaFile['length'];
let contentType = foundMetaFile['contentType'];
// let chunkSize = foundMetaFile['chunkSize'];
if(req.headers['range']) {
// Range request, partialle stream the file
console.log('Range Reuqest');
var parts = req.headers['range'].replace(/bytes=/, "").split("-");
var partialStart = parts[0];
var partialEnd = parts[1];
var start = parseInt(partialStart, 10);
var end = partialEnd ? parseInt(partialEnd, 10) : fileLength - 1;
var chunkSize = (end - start) + 1;
console.log('Range ', start, '-', end);
res.writeHead(206, {
'Content-Range': 'bytes ' + start + '-' + end + '/' + fileLength,
'Accept-Ranges': 'bytes',
'Content-Length': chunkSize,
'Content-Type': contentType
});
}
let { mongodbConnection } = global;
let bucket = new GridFSBucket(mongodbConnection, { bucketName: 'fs' });
return new Promise ((resolve, reject) => {
let downloadStream = bucket.openDownloadStream(fileId);
downloadStream.on('error', (err) => {
console.log("Received Error stream")
res.end();
reject(err);
})
downloadStream.on('end', () => {
console.log("Received End stream");
res.end();
resolve(true);
})
console.log("start streaming");
downloadStream.pipe(res);
})
} catch (error) {
switch (error.name) {
case 'UsageError':
return res.status(400).json(Res.error(undefined, {message: 'invalid Input'}));
case 'AdapterError':
return res.status(400).json(Res.error(undefined, {message: 'adapter Error'}));
default:
return res.serverError(error);
}
