HTML视频播放器可播放GridFS大视频但无法加载小视频问题
问题现象
- 1GB、500MB级别的大视频可正常播放,60MB及以下的小视频无法加载,连元数据都读取失败
- 小视频加载异常状态截图
- 元数据加载失败状态截图
- 大视频正常加载状态截图
前端视频代码
<video src="${url}" style="width:100% !important; height: inherit; background: black;" controls autoplay muted preload="metadata"></video>
已做排查动作
- 调整响应头的
Content-Range字段值、修改响应状态码,均无法解决问题
服务器处理Range请求的核心代码
route.get('/video/:id', async (req, res) => { const { id } = req.params; const range = req.headers.range; console.log(range); if (!range || range === undefined) { res.writeHead(416,{ "Content-Range":`bytes */*` }).send("Requires Range header"); return; } try { const cursor = await bucket.find({ "_id": id }); let size, type; await cursor.forEach(document => { size = document.length; type = document.metadata.mimeType; }); let CHUNK_SIZE = 1024 *1024 ; // 1MB let start = Number(range.replace(/\D/g, "")); const end = Math.min(start + CHUNK_SIZE, size-1); if(start>=size || start===end){ res.writeHead(416,{ "Content-Range":`bytes */${size}` }) return res.end(); } try { const downloadStream = await bucket.openDownloadStream(id, { start: start, end: end }); const contentLength = end - start; const headers = { "Content-Range": `bytes ${start}-${end}/${size}`, "Accept-Ranges": "bytes", "Content-Length": contentLength, "Content-Type": "video/mp4", }; res.writeHead(206, headers); downloadStream.pipe(res); } catch (err) { console.log('Error: ' + err); res.status(416).send(); } } catch (err) { console.log('Error: ' + err); res.status(416).send(); } });
内容的提问来源于stack exchange,提问作者moz
相关产品推荐
相关产品推荐

