浅谈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实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
晶体管来复再生式二管收音机
2021/03/02 无线电
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
JavaScript中的事件处理
2008/01/16 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python下的subprocess模块的入门指引
2015/04/16 Python
Python pickle模块实现对象序列化
2019/11/22 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python中字符串的编码与解码详析
2020/12/03 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
孔子观后感
2015/06/08 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL