解決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();

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM