ios和安卓手机端使用video标签播放失败的问题

一、情况说明

手机端请求后端接口，返回视频流给前端，然后在手机端进行播放，手机端需要适配ios和安卓，后端在开发好接口后在浏览器、postman调用接口时都能正常播放，安卓客户端也可以正常播放，但是ios播放失败。
刚开始觉得是网速太慢的原因，换了一个更小的视频，仍然不行，然后查了下资料，说是视频编码的问题，然后又换了下视频编码，仍然不行，最后经过测试，发现ios客户端使用video标签解析视频时会根据响应的请求头进行读取数据，响应头需要包含文件大小，如果没有就无法解析视频，但是在安卓客户端和浏览器上是没有这种问题的，所以需要兼容ios。

二、条件说明

视频文件是通过手机拍摄，没有经过任何处理的mp4文件。
后端是springboot项目，将视频放在resource资源目录下。
前端需要适配ios和安卓客户端，使用video标签进行解析。

三、后端代码

• 首先需要读取类路径下的指定资源文件，转换为二进制流，设置好响应头，再返回。
  

import org.springframework.core.io.ClassPathResource;
import org.springframework.util.FileCopyUtils;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;

	@GetMapping("/video/{fileName}")
    public void video2(@PathVariable String fileName, HttpServletResponse response) throws IOException {
    	//读取类路径下的资源文件
        ClassPathResource resource = new ClassPathResource("file/" + fileName);
        //转为File对象
        File file = resource.getFile();
        //获取文件大小，因为file.length()返回的是long类型，单位是B,但是响应头是int类型，所以需要强转为int类型
        //int类型的大小为2147483647,折算下来,文件大小不能超过1GB,可以这样做,如果大小超过1GB,那么需要分段读取返回了
        int fileLength = (int)file.length();
        //将文件对象转为输入流
        FileInputStream input = new FileInputStream(file);
		//设置响应头，inline:表示在线预览,后面是文件的名字
        response.setHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(fileName, "UTF-8"));
        //设置文件的大小 （ios不设置无法正常播放视频）
        response.setHeader("Content-Length", String.valueOf(fileLength));
        //文件格式
        response.setContentType("video/mp4");
        //将二进制流返回给前端
        FileCopyUtils.copy(input, response.getOutputStream());
    }

四、总结

• 安卓和浏览器适配做得很好，只需要设置好文件类型和Content-Disposition，最后返回文件的二进制流即可。
  但是ios客户端还需要设置文件大小才能正确播放。
  我只做了MP4格式的视频，其他格式的视频暂时还没有试过，百度看了下，其他视频文件可能会涉及到视频编码的问题。
• 在手机端上播放视频，流量很贵，像我的做法的话都是一次性返回整个文件的二进制流，这样过于暴力，后续优化的时候，可能要设置另外的响应头，进行分段返回。比如响应头中Content-Range是获取文件的部分内容。
• 用分段的形式返回文件二进制流的实现方式：分段返回文件二进制流的实现方式