解决html5中的video,ios系统中无法播放使用

1.先是从前端的角度去考虑,如何让safari浏览器兼容video,并支持播放(未找到解决的方法)。

2.经多次查找网上信息,发现使用后台能解决该问题,解决点在HTTP协议的响应头里面(Accept-Ranges)。

3.safari浏览器,在打开视频的时候,先是发送一个请求探测文件的大小,之后再多次发送请求分段获取数据流的数据(个人理解大概是分段下载,Accept-Ranges)。

4.想要解决这种问题要考虑两个方面:

a.需要根据请求内容的不同做出不同的响应,第一次探测请求需要返回200,后面的请求需要返回206和具体数据

b.contentType必须设置为video/mp4

5.具体代码

这里已经封装好了,直接拿过来使用就ok了。

/**
 * 新增视频加载方法,解决ios系统vedio标签无法播放视频问题
 * @param request
 * @param response
 * @param file
 * @param fileName
 * @throws FileNotFoundException
 * @throws IOException
 */
public static void sendVideo(HttpServletRequest request, HttpServletResponse response, File file, String fileName) throws FileNotFoundException, IOException {
    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;
    }

    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);
        }
    }
    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();

}

解决html5中的video,ios系统中无法播放使用

上一篇:uni-app(二)接口请求封装,全局输出api


下一篇:苹果Mac系统如何安装pip命令?