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


Posted in HTML / CSS onAugust 10, 2020

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

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

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

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

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

b.contentType必须设置为video/mp4

5.具体代码

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

private 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系统中无法播放使用的问题的文章就介绍到这了,更多相关html5中的video标签ios系统无法播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 #HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 #HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 #HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 #HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 #HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 #HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 #HTML / CSS
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
为你总结一些php信息函数
2015/10/21 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
常用的javascript function代码
2008/05/23 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Python subprocess模块详细解读
2018/01/29 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python实现与redis交互操作详解
2020/04/21 Python
Python中bisect的用法及示例详解
2020/07/20 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
幼儿园英语教学反思
2014/01/30 职场文书
初中中等生评语
2014/12/29 职场文书
博士论文答辩开场白
2015/06/01 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js