解决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 相关文章推荐
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS 伪元素::marker详解
Jun 26 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
linux iconv方法的使用
2011/10/01 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
农村改厕实施方案
2014/03/22 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python