ios的Safari浏览器下视频播放问题
程序员文章站
2022-06-17 16:00:29
...
起因
最近在做手机端接口对接,后端使用java,前端使用vue开发,在提供给前端视频接口时出现了个问题:
视频在安卓上可以播放,在ios的Safari浏览器就是不能播放;
原因:
- 在安卓上,请求一个视频链接,返回一整个视频文件。
- 对于ios来说,他不是一次性请求全部文件的,一般首先会请求0-1字节,这个写在request header的"range"字段中:range:‘bytes=0-1’
如果想要传输视频,必须要解析range字段,然后按照range字段的要求返回对应的数据,同时response header至少要包含三个字段:“Content-Type”, “Content-Range”, “Content-Length”
“Content-Type"必需明确指定视频格式,有"video/mp4”, “video/ogg”, "video/mov"等等。
"Content-Range"格式是 “bytes -/”,其中start和end必需对应request header里的range字段,total是文件总大小,不是返回的数据长度
"Content-Length"指定返回的二进制长度
解决方案:
解决方案: 后端根据视频请求流字节进行拆分返回,不要直接返回一个整个视频
示例代码
下面代码主要显示mp4格式
import cn.hutool.core.io.FileUtil;
@GetMapping("/video/{pictureId:.+}")
public void renderVideo(@PathVariable("pictureId") String pictureId, HttpServletResponse response,HttpServletRequest request) {
try {
//根据id 获取文件信息
DwzdFileInfo dwzdFileInfo = dwzdFileInfoService.get(pictureId);
//获取文件真实路径
String filePath = dwzdFileInfo.getFilePath();
File file = FileUtil.file(filePath);
//只读模式
RandomAccessFile randomFile = new RandomAccessFile(file, "r");
long contentLength = randomFile.length();
String range = request.getHeader("Range");
int start = 0, end = 0;
if(range != null && range.startsWith("bytes=")){
String[] values = range.split("=")[1].split("-");
start = Integer.parseInt(values[0]);
if(values.length > 1){
end = Integer.parseInt(values[1]);
}
}
int requestSize = 0;
if(end != 0 && end > start){
requestSize = end - start + 1;
} else {
requestSize = Integer.MAX_VALUE;
}
byte[] buffer = new byte[4096];
response.setContentType("video/mp4");
response.setHeader("Accept-Ranges", "bytes");
response.setHeader("ETag", dwzdFileInfo.getFileName());
response.setHeader("Last-Modified", new Date().toString());
//第一次请求只返回content length来让客户端请求多次实际数据
if(range == null){
response.setHeader("Content-length", contentLength + "");
}else{
//以后的多次以断点续传的方式来返回视频数据 //206
response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);
long requestStart = 0, requestEnd = 0;
String[] ranges = range.split("=");
if(ranges.length > 1){
String[] rangeDatas = ranges[1].split("-");
requestStart = Integer.parseInt(rangeDatas[0]);
if(rangeDatas.length > 1){
requestEnd = Integer.parseInt(rangeDatas[1]);
}
}
long length = 0;
if(requestEnd > 0){
length = requestEnd - requestStart + 1;
response.setHeader("Content-length", "" + length);
response.setHeader("Content-Range", "bytes " + requestStart + "-" + requestEnd + "/" + contentLength);
}else{
length = contentLength - requestStart;
response.setHeader("Content-length", "" + length);
response.setHeader("Content-Range", "bytes "+ requestStart + "-" + (contentLength - 1) + "/" + contentLength);
}
}
ServletOutputStream out = response.getOutputStream();
int needSize = requestSize;
randomFile.seek(start);
while(needSize > 0){
int len = randomFile.read(buffer);
if(needSize < buffer.length){
out.write(buffer, 0, needSize);
} else {
out.write(buffer, 0, len);
if(len < buffer.length){
break;
}
}
needSize -= buffer.length;
}
randomFile.close();
out.close();
} catch (Exception e) {
//如果找不到图片就返回一个默认图片
try {
String path404 = request.getSession().getServletContext().getRealPath("/static/404.png");
byte[] bytes = FileUtil.readBytes(path404);
response.getOutputStream().write(bytes);
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
参考链接:
https://blog.csdn.net/qq_27800521/article/details/88247301
推荐阅读
-
safari浏览器下body,document,window的click事件无效问题的处理方法
-
ios的Safari浏览器下视频播放问题
-
Chrome、firefox浏览器中video标签无法播放MP4视频的问题解决
-
ios Safari浏览器下audio音频播放延迟问题,自动播放失效问题
-
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
-
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
-
php 输出视频流ios无法播放的问题(隐藏真实播放地址),已解决
-
safari浏览器下body,document,window的click事件无效问题的处理方法