浅谈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实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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
typecho插件编写教程(五):核心代码
2015/05/28 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
JavaScript触发器详解
2007/03/10 Javascript
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
校园门卫岗位职责
2013/12/09 职场文书
2014年元旦感言
2014/03/06 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
劳模先进事迹材料
2014/12/24 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
关于python中模块和重载的问题
2021/11/02 Python
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技