解决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背景下的@font face规则
May 04 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
纯html+css实现打字效果
Aug 02 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
取选中的radio的值
2010/01/11 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
再谈javascript原型继承
2014/11/10 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
对Python w和w+权限的区别详解
2019/01/23 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
一些高难度的SQL面试题
2016/11/29 面试题
师范大学音乐表演专业求职信
2013/10/23 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
森林防火标语
2014/06/23 职场文书
2014年超市工作总结
2014/11/19 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
电影圆明园观后感
2015/06/03 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
Java基础-封装和继承
2021/07/02 Java/Android
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python