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的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准. ...
随机推荐
- Kettle 值映射
在费用转换里面做了两个值映射.一个是编码.一个是名称.其中两个值映射设置不一样效果不一样. 第一个编码映射 目标字段名不为空,则表示会新增字段.其中复核源值条件的都会转换为目标值,不符合条件的会用[不 ...
- Ubuntu16.04下编译OpenCV2.4.13静态库(.a文件)
Ubuntu16.04下编译OpenCV2.4.13静态库(.a文件) https://blog.csdn.net/woainishifu/article/details/79712110 我们在做项 ...
- 数据库表的约束constraints
数据库表的约束constraints 数据完整性约束 表的数据有一定的取值范围和联系,多表之间的数据有时也有一定的参照关系. 在创建表和修改表时,可通过定义约束条件来保证数据的完整性和一致性. 约束条 ...
- ${__BeanShell(${SCRIPT})}
通过将变量名称括在' $ { '和' } '中来引用测试元素中的变量. 函数以相同的方式引用,但按照惯例,函数名称以“ __ ” 开头,以避免与用户值名称冲突*.有些函数使用参数来配置它们,这些函数用 ...
- WordCount C语言实现求文本的字符数,单词数,行数
1.码云地址: https://gitee.com/miaomiaobobo/WordCount 2.psp表格 PSP2.1表格 PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) P ...
- docker 容器 centos + tomcat + jdk
环境: 阿里云ecs服务器 步骤: 1.安装docker 2.获取centos镜像 3.下载tomcat 和 jdk 安装包 4.配置 1.安装docker https://www.cnblogs.c ...
- ubuntu下nodejs环境搭建
#0.0.0.0 account.jetbrains.com”添加到hosts文件中 apt-get升级 sudo apt-get upgrade apt-get更新 sudo apt-get upd ...
- 原子操作类AtomicInteger详解
为什么需要AtomicInteger原子操作类?对于Java中的运算操作,例如自增或自减,若没有进行额外的同步操作,在多线程环境下就是线程不安全的.num++解析为num=num+1,明显,这个操作不 ...
- ionic3 pop到指定页面
this.navCtrl.getViews().forEach(element => { if(element.name == 'JiecheHomePage'){ this.navCtrl.p ...
- [SpringBoot系列]--Spring Hibernate search 注解实现(未测试)
1.maven项目pom.xml加入依赖 <dependency> <groupId>org.hibernate</groupId> <artifactId& ...