解决<video> 标签 ,safari下无法播放视频的问题

1,026 阅读1分钟

最近在开发项目时,需要阅览上传的视频文件。写了个video标签,实现播放效果。

当时看了下Chrome,没什么问题。

后来在进行多浏览器测试时,发现在safari中无法播放视频,经过调查,发现是服务端没能支持range请求头导致。

现改修方案如下:

String range = httpServletRequest.getHeader("range");
Path directory = Paths.get(resourceFilePath);
File file = directory.toFile();

long fileSize = file.length();
if(null != range && !"".equals(range)) {
	Pattern pattern = Pattern.compile("bytes=(\\d*)-(\\d*)");
	Matcher matcher = pattern.matcher(range);

	long startByte = 0L;
	long endByte = fileSize - 1L;

	if (matcher.find()) {
		if (null != matcher.group(1) && !"".equals(matcher.group(1))) {
			// 获取“-”左侧的起始字节(偏移量)。 如果不存在,则默认值为 0L。
			startByte = Long.parseLong(matcher.group(1));
		}
		if (null != matcher.group(2) && !"".equals(matcher.group(2))) {
			// 获取“-”右侧的结束字节。 默认文件大小-1L(如果不存在)
			endByte = Long.parseLong(matcher.group(2));
		}
	}
	long byteSize = endByte - startByte + 1L;
	httpServletResponse.setStatus(206);
	httpServletResponse.setHeader("Accept-Ranges", "bytes");
	httpServletResponse.setHeader("Content-Length", String.valueOf(byteSize));
	httpServletResponse.setHeader("Content-Range", "bytes " + startByte + "-" + endByte + "/" + fileSize);
	String mimeType = "";
	if (fileName.toLowerCase().endsWith(".js")) {
		mimeType = "application/x-javascript";
	} else if (fileName.toLowerCase().endsWith(".css")) {
		mimeType = "text/css";
	} else {
		mimeType = URLConnection.guessContentTypeFromName(fileName);
	}
	httpServletResponse.setContentType(mimeType);
	byte[] bytes = new byte[(int) byteSize];
	// 读取并返回请求范围内请求字节数的文件资源。
	in.skip(startByte);
	in.read(bytes, 0, (int) byteSize);
	outStream.write(bytes);
	outStream.flush();
}else{
    ...
}