浅谈Html5中视频 音频标签 进度条的问题


Posted in HTML / CSS onJuly 26, 2016

最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效,

查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的html使用video标签播放本地文件进度条会不会能用呢?

试了一下发现真的可以使用,随后F12查看播放本地视频和播放项目中的网络响应有什么区别,发现响应头多了些东西,随把这些东西一个一个加到后台代码中,最后成功了!

JavaScript Code复制内容到剪贴板
  1. response.setHeader("Cache-Control","max-age=31536000, must-revalidate");  
  2. response.setHeader("Content-Length", file.length() + "");  
  3. if (fileName.contains(".mp4")) {  
  4.    response.setContentType("video/mpeg4");  
  5. }  
  6. if (fileName.contains(".mp3")) {  
  7.    response.setContentType("audio/mpeg");  
  8.    response.setHeader("Accept-Ranges:""bytes");  
  9. }  

以上就是小编为大家带来的浅谈Html5中视频 音频标签 进度条的问题全部内容了,希望大家多多支持三水点靠木~

原文地址:http://www.cnblogs.com/youcanyouup/archive/2016/07/25/5704429.html

HTML / CSS 相关文章推荐
css3弹性盒模型实例介绍
May 27 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 #HTML / CSS
浅谈HTML5 & CSS3的新交互特性
Jul 19 #HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 #HTML / CSS
HTML5 拖放功能实现代码
Jul 14 #HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 #HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 #HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 #HTML / CSS
You might like
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
供货协议书范本
2014/04/22 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年民警工作总结
2014/11/25 职场文书
素质教育学习心得体会
2016/01/19 职场文书