浅谈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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 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
linux iconv方法的使用
2011/10/01 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
php intval函数用法总结
2019/04/14 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
js日期联动示例
2014/05/02 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
js密码强度检测
2016/01/07 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python调用C语言程序方法解析
2020/07/07 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
汇科协同Java笔试题
2012/03/31 面试题
结婚典礼证婚词
2014/01/08 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
经典毕业生求职信
2014/07/12 职场文书
保险公司演讲稿
2014/09/02 职场文书
运动会致辞稿
2015/07/29 职场文书
经典祝酒词大全
2015/08/12 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL