h5标签<video/>在iphone上无法播放的问题

[dongtianqi]

<video controls="controls" autoplay="autoplay" id="video"> <source id="source" src="" type="video/mp4"> </video>
问题：这样一段和w3c实例一样的代码会有什么问题呢，为啥在iphone上播放不了呢
原因：视频格式MP4是正确的，但是你的后台没有对ios的视频播放器做适配。
如果想要在iOS上播放视频，那么必须在http协议中应用rang请求头。

对于有的朋友还对ios播放器http的range标记不是很懂。我再讲解下。

视频文件总长度是123456789
range是播放器要求的区间也就是客户端发送请求的时候http会带有这个标记，这个区间的值在http.headers.range中获取，一般是bytes=0-1这样的。

我们需要做的处理是返回文件的指定区间（如上面的例子，我们就应该返回0到1的字符），并添加Content-Range:btyes 0-1、Accept-Ranges:bytes、'Content-Length: 123456789'，'Content-Type: video/mp4'到http.headers中

上一段node代码就明白了：

`var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs')
http.createServer(function (req, res) {
var pathname = __dirname+url.parse(req.url).pathname;
if (path.extname(pathname)=='') {

pathname+='/';
}
if (pathname.charAt(pathname.length-1)=='/'){

pathname+='index.html';
}

fs.exists(pathname,function(exists){
if(exists){

switch(path.extname(pathname)){
case '.html':
res.writeHead(200, {'Content-Type': 'text/html'});
break;
case '.js':
res.writeHead(200, {'Content-Type': 'text/javascript'});
break;
case '.css':
res.writeHead(200, {'Content-Type': 'text/css'});
break;
case '.gif':
res.writeHead(200, {'Content-Type': 'image/gif'});
break;
case '.jpg':
res.writeHead(200, {'Content-Type': 'image/jpeg'});
break;
case '.png':
res.writeHead(200, {'Content-Type': 'image/png'});
break;
case '.mp4':
res.writeHead(200, {
'Content-Type' : 'video/mp4',
'Accept-Ranges' : 'bytes',
//'Range' : 'bytes=0-1',
'Content-Range' : 'bytes 0-1',
'Content-Range' : 'bytes 1-11000/243104',
'Content-Length' : 11000,
'Content-Range' : 'bytes 11001-243103/243104',
'Content-Length' : 133103
});
default:
res.writeHead(200, {'Content-Type': 'application/octet-stream'});
}
fs.readFile(pathname,function (err,data){
res.end(data);
});
} else {

res.writeHead(404, {'Content-Type': 'text/html'});
res.end('404 Not Found');
}
});

}).listen(8181);`