39,118
社区成员
发帖
与我相关
我的任务
分享问题描述：直接URL的实体MP4文件地址是都可以播放的，但通过字节流返回的mp4文件，H5的<video>标签为什么PC浏览器可以播放，手机浏览器不能播放。
http://h5.taopu1.com/002500.html
这个是我们目前的上线试运行地址，第一个轮播图视频和最后一个视频都是后台文件流输出的，倒数第二个视频是URL相对路径存储的，都是同一个MP4文件，但URL直接存放的MP4就可以手机上播放，后台文件流输出的MP4在手机H5浏览器上就提示视频播放错误，但在PC浏览器上就可以播放。
疑问：通过调试断点发现，PC端浏览刷新时，以文件流方式的函数downFile被触发，这可能是PC浏览器能播放的原因，但发现手机浏览器刷新时，却没有触发MP4文件流的函数downFile，难道是没有加载？为什么没有触发MP4文件流函数呢？
说明：通过MP4的URL地址，PC浏览器 或 手机浏览器也都是可以下载文件的。
以为是浏览器header的问题，也调整了header，把content-disposition: 给去掉了。
文件流的类内容如下：
http://h5.taopu1.com/002500.html
这个是我们目前的上线试运行地址，第一个轮播图视频和最后一个视频都是后台文件流输出的，倒数第二个视频是URL相对路径存储的，都是同一个MP4文件，但URL直接存放的MP4就可以手机上播放，后台文件流输出的MP4在手机H5浏览器上就提示视频播放错误，但在PC浏览器上就可以播放。
疑问：通过调试断点发现，PC端浏览刷新时，以文件流方式的函数downFile被触发，这可能是PC浏览器能播放的原因，但发现手机浏览器刷新时，却没有触发MP4文件流的函数downFile，难道是没有加载？为什么没有触发MP4文件流函数呢？
说明：通过MP4的URL地址，PC浏览器 或 手机浏览器也都是可以下载文件的。
以为是浏览器header的问题，也调整了header，把content-disposition: 给去掉了。
文件流的类内容如下：
/**
* 向浏览器发送文件下载，支持断点续传
* @param file 要下载的文件
* @param request 请求对象
* @param response 响应对象
* @return 返回错误信息，无错误信息返回null
*/
public static String downFile(File file, HttpServletRequest request, HttpServletResponse response){
return downFile(file, request, response, null);
}
/**
* 向浏览器发送文件下载，支持断点续传
* @param file 要下载的文件
* @param request 请求对象
* @param response 响应对象
* @param fileName 指定下载的文件名
* @return 返回错误信息，无错误信息返回null
*/
public static String downFile(File file, HttpServletRequest request, HttpServletResponse response, String fileName){
long fileLength = file.length(); // 记录文件大小
long pastLength = 0; // 记录已下载文件大小
int rangeSwitch = 0; // 0：从头开始的全文下载；1：从某字节开始的下载（bytes=27000-）；2：从某字节开始到某字节结束的下载（bytes=27000-39000）
long toLength = 0; // 记录客户端需要下载的字节段的最后一个字节偏移量（比如bytes=27000-39000，则这个值是为39000）
long contentLength = 0; // 客户端请求的字节总量
String rangeBytes = ""; // 记录客户端传来的形如“bytes=27000-”或者“bytes=27000-39000”的内容
RandomAccessFile raf = null; // 负责读取数据
OutputStream os = null; // 写出数据
OutputStream out = null; // 缓冲
byte b[] = new byte[1024]; // 暂存容器
if (request.getHeader("Range") != null) { // 客户端请求的下载的文件块的开始字节
response.setStatus(javax.servlet.http.HttpServletResponse.SC_PARTIAL_CONTENT);
logger.debug("request.getHeader(\"Range\") = " + request.getHeader("Range"));
rangeBytes = request.getHeader("Range").replaceAll("bytes=", "");
if (rangeBytes.indexOf('-') == rangeBytes.length() - 1) {// bytes=969998336-
rangeSwitch = 1;
rangeBytes = rangeBytes.substring(0, rangeBytes.indexOf('-'));
pastLength = Long.parseLong(rangeBytes.trim());
contentLength = fileLength - pastLength; // 客户端请求的是 969998336 之后的字节
} else { // bytes=1275856879-1275877358
rangeSwitch = 2;
String temp0 = rangeBytes.substring(0, rangeBytes.indexOf('-'));
String temp2 = rangeBytes.substring(rangeBytes.indexOf('-') + 1, rangeBytes.length());
pastLength = Long.parseLong(temp0.trim()); // bytes=1275856879-1275877358，从第 1275856879 个字节开始下载
toLength = Long.parseLong(temp2); // bytes=1275856879-1275877358，到第 1275877358 个字节结束
contentLength = toLength - pastLength; // 客户端请求的是 1275856879-1275877358 之间的字节
}
} else { // 从开始进行下载
contentLength = fileLength; // 客户端要求全文下载
}
// 如果设设置了Content-Length，则客户端会自动进行多线程下载。如果不希望支持多线程，则不要设置这个参数。 响应的格式是:
// Content-Length: [文件的总大小] - [客户端请求的下载的文件块的开始字节]
// ServletActionContext.getResponse().setHeader("Content- Length", new Long(file.length() - p).toString());
response.reset(); // 告诉客户端允许断点续传多线程连接下载,响应的格式是:Accept-Ranges: bytes
if (pastLength != 0) {
response.setHeader("Accept-Ranges", "bytes");// 如果是第一次下,还没有断点续传,状态是默认的 200,无需显式设置;响应的格式是:HTTP/1.1 200 OK
// 不是从最开始下载, 响应的格式是: Content-Range: bytes [文件块的开始字节]-[文件的总大小 - 1]/[文件的总大小]
logger.debug("服务器即将开始断点续传...");
switch (rangeSwitch) {
case 1: { // 针对 bytes=27000- 的请求
String contentRange = new StringBuffer("bytes ").append(new Long(pastLength).toString()).append("-")
.append(new Long(fileLength - 1).toString()).append("/").append(new Long(fileLength).toString()).toString();
response.setHeader("Content-Range", contentRange);
break;
}
case 2: { // 针对 bytes=27000-39000 的请求
String contentRange = rangeBytes + "/" + new Long(fileLength).toString();
response.setHeader("Content-Range", contentRange);
break;
}
default: {
break;
}
}
}
try {
boolean isPreview = true;//"preview".equalsIgnoreCase(request.getParameter("source"));
response.addHeader("Content-Disposition", (!isPreview ? "attachment; " : "") + "filename=\"" +
EncodeUtils.encodeUrl(StringUtils.isBlank(fileName) ? file.getName() : fileName) + "\"");
response.setContentType(FileUtils.getContentType(file.getName())); // set the MIME type.
response.addHeader("Content-Length", String.valueOf(contentLength));
os = response.getOutputStream();
out = new BufferedOutputStream(os);
raf = new RandomAccessFile(file, "r");
try {
switch (rangeSwitch) {
case 0: { // 普通下载，或者从头开始的下载 同1
}
case 1: { // 针对 bytes=27000- 的请求
raf.seek(pastLength); // 形如 bytes=969998336- 的客户端请求，跳过 969998336 个字节
int n = 0;
while ((n = raf.read(b, 0, 1024)) != -1) {
out.write(b, 0, n);
}
break;
}
case 2: { // 针对 bytes=27000-39000 的请求
raf.seek(pastLength); // 形如 bytes=1275856879-1275877358 的客户端请求，找到第 1275856879 个字节
int n = 0;
long readLength = 0; // 记录已读字节数
while (readLength <= contentLength - 1024) {// 大部分字节在这里读取
n = raf.read(b, 0, 1024);
readLength += 1024;
out.write(b, 0, n);
}
if (readLength <= contentLength) { // 余下的不足 1024 个字节在这里读取
n = raf.read(b, 0, (int) (contentLength - readLength));
out.write(b, 0, n);
}
break;
}
default: {
break;
}
}
out.flush();
logger.debug("下载完成！" + file.getAbsolutePath());
} catch (IOException ie) {
/**
* 在写数据的时候， 对于 ClientAbortException 之类的异常，
* 是因为客户端取消了下载，而服务器端继续向浏览器写入数据时， 抛出这个异常，这个是正常的。
* 尤其是对于迅雷这种吸血的客户端软件， 明明已经有一个线程在读取 bytes=1275856879-1275877358，
* 如果短时间内没有读取完毕，迅雷会再启第二个、第三个。。。线程来读取相同的字节段， 直到有一个线程读取完毕，迅雷会 KILL
* 掉其他正在下载同一字节段的线程， 强行中止字节读出，造成服务器抛 ClientAbortException。
* 所以，我们忽略这种异常
*/
logger.debug("提醒：向客户端传输时出现IO异常，但此异常是允许的，有可能客户端取消了下载，导致此异常，不用关心！");
}
} catch (Exception e) {
logger.debug(e.getMessage(), e);
} finally {
if (out != null) {
try {
out.close();
} catch (IOException e) {
// logger.error(e.getMessage(), e);
}
}
if (raf != null) {
try {
raf.close();
} catch (IOException e) {
// logger.error(e.getMessage(), e);
}
}
}
return null;
}
...全文
请发表友善的回复…
发表回复
hanguoji84 2019-06-11
- 打赏
- 举报
请大家帮看下，这文件流方式传视频mp4，为什么手机浏览器：video标签播放不了。。。但PC浏览器却可以。
hanguoji84 2019-06-11
- 打赏
- 举报
如上可以解决video文件流播放问题。
Starting6525 2019-06-11
- 打赏
- 举报
请参考：
ServletOutputStream out=null;
RandomAccessFile randomFile=null;
try {
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;
}
response.setContentType("video/mp4");
response.setHeader("Accept-Ranges", "bytes");
response.setHeader("ETag", fileName);
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);
}
}
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;
}
out.flush();
} catch (IOException e) {
logger.debug(e.getMessage(), e);
}finally {
if (out != null) {
try {
out.close();
} catch (IOException e) {
}
}
if (randomFile != null) {
try {
randomFile.close();
} catch (IOException e) {
}
}
}
return null;
