解决html5中的video标签ios系统中无法播放使用的问题

海涛

1.先是从前端的角度去考虑，如何让safari浏览器兼容video，并支持播放（未找到解决的方法）。
2.经多次查找网上信息，发现使用后台能解决该问题，解决点在HTTP协议的响应头里面（Accept-Ranges）。
3.safari浏览器，在打开视频的时候，先是发送一个请求探测文件的大小，之后再多次发送请求分段获取数据流的数据（个人理解大概是分段下载，Accept-Ranges）。
4.想要解决这种问题要考虑两个方面：

1. a.需要根据请求内容的不同做出不同的响应，第一次探测请求需要返回200，后面的请求需要返回206和具体数据
   
2. b.contentType必须设置为video/mp4

复制代码

5.具体代码
这里已经封装好了，直接拿过来使用就ok了。

1. private void sendVideo(HttpServletRequest request, HttpServletResponse response, File file, String fileName) throws FileNotFoundException, IOException {
   
2.                 RandomAccessFile randomFile = new RandomAccessFile(file, "r");//只读模式
   
3.                 long contentLength = randomFile.length();
   
4.         String range = request.getHeader("Range");
   
5.         int start = 0, end = 0;
   
6.         if(range != null && range.startsWith("bytes=")){
   
7.             String[] values = range.split("=")[1].split("-");
   
8.             start = Integer.parseInt(values[0]);
   
9.             if(values.length > 1){
   
10.                 end = Integer.parseInt(values[1]);
    
11.             }
    
12.         }
    
13.         int requestSize = 0;
    
14.         if(end != 0 && end > start){
    
15.             requestSize = end - start + 1;
    
16.         } else {
    
17.             requestSize = Integer.MAX_VALUE;
    
18.         }
    
19. 
    
20.         response.setContentType("video/mp4");
    
21.         response.setHeader("Accept-Ranges", "bytes");
    
22.         response.setHeader("ETag", fileName);
    
23.         response.setHeader("Last-Modified", new Date().toString());
    
24.         //第一次请求只返回content length来让客户端请求多次实际数据
    
25.         if(range == null){
    
26.             response.setHeader("Content-length", contentLength + "");
    
27.         }else{
    
28.                 //以后的多次以断点续传的方式来返回视频数据
    
29.             response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);//206
    
30.             long requestStart = 0, requestEnd = 0;
    
31.             String[] ranges = range.split("=");
    
32.             if(ranges.length > 1){
    
33.                 String[] rangeDatas = ranges[1].split("-");
    
34.                 requestStart = Integer.parseInt(rangeDatas[0]);
    
35.                 if(rangeDatas.length > 1){
    
36.                     requestEnd = Integer.parseInt(rangeDatas[1]);
    
37.                 }
    
38.             }
    
39.             long length = 0;
    
40.             if(requestEnd > 0){
    
41.                 length = requestEnd - requestStart + 1;
    
42.                 response.setHeader("Content-length", "" + length);
    
43.                 response.setHeader("Content-Range", "bytes " + requestStart + "-" + requestEnd + "/" + contentLength);
    
44.             }else{
    
45.                 length = contentLength - requestStart;
    
46.                 response.setHeader("Content-length", "" + length);
    
47.                 response.setHeader("Content-Range", "bytes "+ requestStart + "-" + (contentLength - 1) + "/" + contentLength);
    
48.             }
    
49.         }
    
50.         ServletOutputStream out = response.getOutputStream();
    
51.         int needSize = requestSize;
    
52.         randomFile.seek(start);
    
53.         while(needSize > 0){
    
54.             byte[] buffer = new byte[4096];
    
55.             int len = randomFile.read(buffer);
    
56.             if(needSize < buffer.length){
    
57.                 out.write(buffer, 0, needSize);
    
58.             } else {
    
59.                 out.write(buffer, 0, len);
    
60.                 if(len < buffer.length){
    
61.                     break;
    
62.                 }
    
63.             }
    
64.             needSize -= buffer.length;
    
65.         }
    
66.         randomFile.close();
    
67.         out.close();
    
68.                
    
69.         }

复制代码

总结
到此这篇关于解决html5中的video标签ios系统中无法播放使用的问题的文章就介绍到这了,更多相关html5中的video标签ios系统无法播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

隨風飄曳

你的信息来源是？我想了解更多。

仅存的徊憶空虚

666666666666

随遇而安

同意你的观点，我们有共鸣。

心情如诗666

这个话题真是有趣，我也对它感兴趣。

1262323439

同意你的观点，我们有共鸣。

铁锅炖大鹅

好用好用

我在宀阳没女伴

666666666666

爱笑的谢乖乖

谢谢你分享这个信息

754408649

已测试，非常不错