无法在Node.js服务器提供的Safari中播放mp4视频 [英] Can't play mp4 video in Safari served by nodejs server
问题描述
在从nodejs服务器提供的Safari上加载mp4视频文件时遇到问题.该问题在Chrome上不存在.
I'm having a problem loading mp4 video files on Safari being served from my nodejs server. The problem does not exist on Chrome.
为了说明这个问题，我有一个简单的html网页，该网页读取了w3schools提供的mp4文件 mov_bbb.mp4 .然后，我下载相同的文件并从我的nodejs服务器提供它.
To illustrate the problem, I have a simple html webpage which reads an mp4 file mov_bbb.mp4 served from w3schools. I then download the same file and serve it from my nodejs server.
vid1 (由w3schools提供)在Chrome和Safari上均可正常加载.
vid1 (served from w3schools) loads fine on both Chrome and Safari.
vid2 (由我的nodejs服务器提供)在Chrome上加载正常，但在Safari上加载不正常.
vid2 (served from my nodejs server) load fine on Chrome but not on Safari.
以下是我在Chrome浏览器中看到的屏幕截图:
Here's a screenshot of what I see in Chrome:
以下是我在Safari中看到的屏幕截图:
Here's a screenshot of what I see in Safari:
这是我的html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<video id="vid1" controls preload="auto" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<video id="vid2" controls preload="auto" src="http://localhost:8125/mov_bbb.mp4"></video>
</body>
</html>
这是我的nodejs服务器:
Here is my nodejs server:
var http = require('http');
var fs = require('fs');
var path = require('path');
http.createServer(function (request, response) {
console.log('request starting...');
var filePath = '.' + request.url;
if (filePath == './')
filePath = './index.html';
var extname = path.extname(filePath);
var contentType = 'video/mp4';
fs.readFile(filePath, function(error, content) {
if (error) {
if(error.code == 'ENOENT'){
fs.readFile('./404.html', function(error, content) {
response.writeHead(200, { 'Content-Type': contentType });
response.end(content, 'utf-8');
});
}
else {
response.writeHead(500);
response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
response.end();
}
}
else {
response.writeHead(200, {
});
response.end(content, 'utf-8');
}
});
}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');
任何建议将不胜感激.
更新:
修订的nodejs代码.Safari上仍然存在相同问题:
Revised nodejs code. Still same issue on Safari though:
var http = require('http');
var fs = require('fs');
http.createServer(function (request, response) {
console.log('request starting...');
var filePath = '.' + request.url;
if (filePath == './') {
var contentType = 'text/html';
filePath = './index.html';
} else {
var contentType = 'video/mp4';
}
var rstream = fs.createReadStream(filePath);
rstream.on('error', function(error) {
response.writeHead(404);
response.end();
});
rstream.on('open', function () {
response.writeHead(200, {
'Content-Type': contentType,
});
});
rstream.pipe(response);
}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');
还有用于http标头的Chrome检查器:
Also chrome inspector for http headers:
推荐答案
视频播放问题与处理必须在服务器上实现的 Content-Range 范围标头有关.Chrome和Safari发送不同的请求标头.就我而言，Chrome发送的单个请求的范围为:
The issue with the video playback has to do with handling the Content-Range range header which must be implemented on the server. Chrome and Safari send different request headers. In my case Chrome sends a single request with range:
bytes=0-
鉴于Safari发送多个请求:
Whereas Safari sends multiple requests:
bytes=0-1
bytes=0-1013150
bytes=197534-1013150
有关更多信息，请参见此线程和有关对我有用的特定代码，请参见此答案.
For more information see this thread and for specific code that worked for me see this answer.
这篇关于无法在Node.js服务器提供的Safari中播放mp4视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
