无法在Chrome中搜索HTML5视频或音频

Question

我已经调整了几周的HTML5视频/音频。通常失败的原因会在一段时间后弹出，但我一直无法找到为什么在chrome中出现了前进和倒带问题。

不管怎样...

当请求视频或音频文件时，视频或音频标记将在extjs面板中加载。这些文件作为流发送，并且在添加了响应头的持续时间后，在IE和firefox中运行良好。 Safari存在问题，但显然整个站点都在HTTPS上运行（正在处理此问题）。

在Chrome（我的问题，而且是最新版本）中，视频和音频加载得很好，但我无法倒带或快进。当尝试寻求视频时，视频只向前几秒钟，直到达到流的末尾。音频也能正常播放，但尝试多次倒带（或快进）会破坏进度条并停止音频播放。

我不确定从服务器发送了什么，但我想知道这是否可能是响应中缺少数据引起的。如果不是这个原因，请指出任何其他问题来帮我解决。我认为我已经涵盖了几乎所有的设置，并确保每个浏览器都有一个源标记。

编辑：这是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>

我发现即使我单独打开这些文件，也无法查找任何文件。我试图自己找到更多信息，这些是Chrome在网络选项卡中显示的标头： 请求URL: 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 接受编码: identity; q = 1，*; q = 0 接受语言: en-US，en; q = 0.8 连接: keep-alive Cookie: sessionId = 5616fde4-50af-43d6-a57c-f06540b64fcb 主机: localhost: 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 内容类型: video / webm 日期: 星期一，2012年5月14日14:23:02 GMT 到期: 星期四，1970年1月1日01:00:00 CET 服务器: Apache-Coyote / 1.1 X-内容持续时间: 17.31

- toxkillfraex

---

我已经添加了一些正在生成的代码和我得到的头文件。 - toxkillfraex

只是为了提醒像我这样只想要一个能够搜索的浏览器的人，建议尝试使用其他浏览器，如Mozilla Firefox（29.0版经过测试可以搜索）。 - Arvind Singh

你可以检查视频的编码。https://dev59.com/RWEi5IYBdhLWcg3wuuUk#68574159 - Ujjawal Mandhani

Answer 1

我找到了这个问题不工作的原因：

HTML5视频不会循环播放

我们的服务器目前不理解部分内容。因此，Chrome发送请求获取没有回应的内容，导致我们的视频和音频无法搜索（和无法循环）。

- toxkillfraex

Answer 2

你需要处理Chrome发送到流媒体服务器的req.headers ['range']。

请参考我下面的代码。 它在Chrome，Firefox，Edge和IE上运行良好。 我还没有在Safari上测试过，但希望它也能工作。

我使用了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);
        }

- Pham Duc Toan

---

请使用以下代码更新： " let downloadStream = bucket.openDownloadStream(fileId, {start: start, end: end}); " --> 它设置了流的起始和结束点选项。 - Pham Duc Toan