解决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 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
详解CSS不受控制的position fixed
May 25 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
五个PHP程序员工具
2008/05/26 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
公务员综合考察材料
2014/02/01 职场文书
安全生产先进个人材料
2014/02/06 职场文书
学校后勤岗位职责
2014/02/19 职场文书
创意广告词
2014/03/17 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python