Html5中 视频 音频标签 进度条问题
最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效,
查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的html使用video标签播放本地文件进度条会不会能用呢?
试了一下发现真的可以使用,随后F12查看播放本地视频和播放项目中的网络响应有什么区别,发现响应头多了些东西,随把这些东西一个一个加到后台代码中,最后成功了!
response.setHeader("Cache-Control","max-age=31536000, must-revalidate");
response.setHeader("Content-Length", file.length() + "");
if (fileName.contains(".mp4")) {
response.setContentType("video/mpeg4");
}
if (fileName.contains(".mp3")) {
response.setContentType("audio/mpeg");
response.setHeader("Accept-Ranges:", "bytes");
}
Html5中 视频 音频标签 进度条问题的更多相关文章
- HTML5之Audio音频标签学习
HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- 认识HTML5中的新标签与新属性
前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- html5中的容器标签和文本标签
html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...
- HTML5新增的音频标签、视频标签
我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: <audio autopla ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...
- 小强的HTML5移动开发之路(15)——HTML5中的音频
浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准. ...
随机推荐
- spring ThreadPoolTaskExecutor使用总结
ThreadPoolTaskExecutor提供TaskDecorator可以实现类似ThreadPoolExecutor.afterExecute()类似功能 taskDecorator主要是对Ru ...
- pycharm下运行unittest的问题
环境: 系统:window7 64 软件:pycharm 版本:2016.3.2 问题描述: 使用unittest类的时候出现问题,问题截图如下 Pycharm 2016.2执行单元测试遇到如下问题: ...
- EndNote登陆Web账号时解决不断询问用户名密码
EndNote登陆Web账号时不断询问用户名密码怎么破?EndNote有个同步功能,在登陆Web账号时,EndNote不断的询问账号和密码,可是用户名和密码明明已经填写正确和完毕,就是登陆不上EndN ...
- CF1097D Makoto and a Blackboard(期望)
[Luogu-CF1097D] 给定 \(n,k\)一共会进行 \(k\) 次操作 , 每次操作会把 \(n\) 等概率的变成 \(n\) 的某个约数 求操作 \(k\) 次后 \(n\) 的期望是多 ...
- golang (3) 编译不同的平台文件
Golang 支持在一个平台下生成另一个平台可执行程序的交叉编译功能. Mac下编译Linux, Windows平台的64位可执行程序: CGO_ENABLED=0 GOOS=linux GOARCH ...
- 经典C面试真题精讲
第一章 灵魂--指针 101. p++ 请分析下述代码的输出结果 int main() { char* p1 = "China"; char* p2, * p3; p2 = (); ...
- .NET Core 中间件
中间件是一种装配到应用管道以处理请求和响应的软件. 每个组件: 1.选择是否将请求传递到管道中的下一个组件. 2.可在管道中的下一个组件前后执行工作. 请求委托用于生成请求管道. 请求委托处理每个 H ...
- 750的设计图以rem为单位的移动设备响应的设置大小
750的设计图,设置font-size: 125%; 1rem =20px; 大部分浏览器默认的字体大小为16px,谷歌默认字体大小为12px; 其他设备的fon-size的比列: 320/720 ...
- 使用maven构建多模块项目_记录
参照孤傲苍狼的博客:https://www.cnblogs.com/xdp-gacl/p/4242221.html 备注:博客中的生成语句,适用于maven3.0.5以上,若为3.0.5以下,则将cr ...
- (转)Linux-HA开源软件Heartbeat(配置篇)
原文:http://ixdba.blog.51cto.com/2895551/548625 http://gzsamlee.blog.51cto.com/9976612/1828870 Linux-H ...