分析
由于移动端系统在做手机端摄像上传，并预览文件的功能，前端用h5 video 标签，后端用springboot+minio。
问题
刚开始写代码和测试的时候，都是用的安卓手机，照片和视频都没问题，后来存在用户使用苹果手机，播放视频就出现各种问题，先是苹果手机拍的mov视频不支持播放，后面又出现苹果手机播放不了视频，应该是ios浏览器不兼容video标签。于是在网上查阅众多资料，结合自身代码，顺利解决了问题。
解决方案说明
iOS上播放视频，http协议中应用rang请求头。
视频格式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中。
前端代码
<!-webkit-playsinline="true"/*这个属性是ios 10中设置可以让视频在小窗内播放,即不全屏播放*/
playsinline="true"/*I0s微信浏览器支持小窗内播放*/
x-webkit-airplay="allow"/*使此视频支持ios的AirPlay功能*/
x5-video-player-type="h5”/*启用H5播放器,是wechat?安卓版特性*/
x5-video-player-fullscreen="true”/*全屏设置,设置为true是防止横屏*/>
-->
<video
autoplay
class="video"
v-if="urlType === 'video'"
:src="previewUrl"
controls
type="video/mp4"
webkit-playsinline="true"
playsinline="true"
x5-playsinline="true"
x-webkit-airplay="allow"
x5-video-player-fullscreen="true"
x5-video-player-type="h5"
></video>
后端代码（重点）
一、IOS播放MP4格式视频
public void downloadImageNew(HttpServletRequest request, HttpServletResponse response, String bucketName, String filename) {
String range = request.getHeader("Range");
//获取文件信息
ObjectStat objectStat = minioConfiguration.minioClient().statObject(bucketName, filename);
//开始下载位置
long startByte = 0;
//结束下载位置
long endByte = objectStat.length() - 1;
//有range的话
if (StringUtils.isNotBlank(range) && range.contains("bytes=") && range.contains("-")) {
range = range.substring(range.lastIndexOf("=") + 1).trim();
String[] ranges = range.split("-");
try {
//判断range的类型
if (ranges.length == 1) {
//类型一：bytes=-2343
if (range.startsWith("-")) {
endByte = Long.parseLong(ranges[0]);
}
//类型二：bytes=2343-
else if (range.endsWith("-")) {
startByte = Long.parseLong(ranges[0]);
}
}
//类型三：bytes=22-2343
else if (ranges.length == 2) {
startByte = Long.parseLong(ranges[0]);
endByte = Long.parseLong(ranges[1]);
}
} catch (NumberFormatException e) {
startByte = 0;
endByte = objectStat.length() - 1;
}
}
//要下载的长度
long contentLength = endByte - startByte + 1;
//文件类型
String contentType = request.getServletContext().getMimeType(filename);
//解决下载文件时文件名乱码问题
byte[] fileNameBytes = filename.getBytes(StandardCharsets.UTF_8);
filename = new String(fileNameBytes, 0, fileNameBytes.length, StandardCharsets.ISO_8859_1);
//各种响应头设置
//支持断点续传，获取部分字节内容：
response.setHeader("Accept-Ranges", "bytes");
//http状态码要为206：表示获取部分内容
response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);
response.setContentType(contentType);
response.setHeader("Last-Modified", new Date().toString());
//inline表示浏览器直接使用，attachment表示下载，fileName表示下载的文件名
response.setHeader("Content-Disposition", "inline;filename=" + filename);
response.setHeader("Content-Length", String.valueOf(contentLength));
//Content-Range，格式为：[要下载的开始位置]-[结束位置]/[文件总大小]
response.setHeader("Content-Range", "bytes " + startByte + "-" + endByte + "/" + objectStat.length());
response.setHeader("ETag", "\"".concat(objectStat.etag()).concat("\""));
//直接下载
InputStream fileInputStream = minioConfiguration.minioClient().getObject(bucketName, filename);
// response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(objectName, "UTF-8"));
IOUtils.copy(fileInputStream, response.getOutputStream());
}
说明：由于minio依赖版本不同，写法也存在差异，低版本minio采用ObjectStat获取文件信息，高版本则使用StatObjectResponse替代：
StatObjectResponse statObjectResponse =
minioClient.statObject(StatObjectArgs.builder().bucket(bucketName).object(filename).build());
二、IOS播放MOV格式视频
public void downloadImageNew(HttpServletRequest request, HttpServletResponse response, String bucketName, String filename) {
if (filename.toLowerCase().contains(".mov")) {
log.info("进入mov文件转码");
File source = null;
File target = null;
try {
InputStream inputStream = minioConfiguration.minioClient().getObject(bucketName, filename);
source = new File("/" + IdUtil.simpleUUID() + ".mov");
target = new File("/" + IdUtil.simpleUUID() + ".mp4");
FileUtils.copyInputStreamToFile(inputStream, source);
AudioAttributes audio = new AudioAttributes();
audio.setCodec("libmp3lame");
audio.setBitRate(new Integer(800000));//设置比特率
audio.setChannels(new Integer(1));//设置音频通道数
audio.setSamplingRate(new Integer(44100));//设置采样率
VideoAttributes video = new VideoAttributes();
// video.setCodec("mpeg4");
video.setCodec("libx264");
video.setBitRate(new Integer(3200000));
video.setFrameRate(new Integer(15));
EncodingAttributes attrs = new EncodingAttributes();
attrs.setOutputFormat("mp4");
attrs.setAudioAttributes(audio);
attrs.setVideoAttributes(video);
ws.schild.jave.Encoder encoder = new Encoder();
encoder.encode(new MultimediaObject(source), target, attrs);
RandomAccessFile randomFile = new RandomAccessFile(target, "r");//只读模式
long contentLength = randomFile.length();
log.info("获取导的contentLength={}", contentLength);
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;
}
response.setContentType("video/mp4");
response.setHeader("Accept-Ranges", "bytes");
response.setHeader("ETag", target.getName());
response.setHeader("Last-Modified", new Date().toString());
//第一次请求只返回content length来让客户端请求多次实际数据
if (range == null) {
response.setHeader("Content-length", contentLength + "");
} else {
//以后的多次以断点续传的方式来返回视频数据
response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);//206
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) {
byte[] buffer = new byte[4096];
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) {
log.error("转码文件出错，失败原因：{}", Throwables.getStackTraceAsString(e));
} finally {
log.info("删除临时文件");
FileUtil.del(source);
FileUtil.del(target);
}
}
}
说明：上述模式为先将MOV格式转换为MP4，因此转换代码需要引入相关依赖：
<!-- mov 转换 mp4 -->
<dependency>
<groupId>ws.schild</groupId>
<artifactId>jave-all-deps</artifactId>
<version>3.0.1</version>
</dependency>
自此可解决上述在IOS环境下无法播放MP4与MOV格式视频问题。
可能出现的其他问题
如果需要播放的视频过长，会导致请求时间较长，需在代码中通用模块处理请求超时时长，防止接口超时返回，走NGINX代理的请求则需要配置缓存大小或超时时间。
proxy_buffer_size 1024k;
proxy_buffers 16 1024k;
proxy_busy_buffers_size 2048k;
proxy_temp_file_write_size 2048k;
proxy_buffering off;
proxy_send_timeout 1000;
proxy_read_timeout 1000;
3036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
