最近项目中使用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中 视频 音频标签 进度条问题的更多相关文章

  1. HTML5之Audio音频标签学习

    HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...

  2. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  3. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  4. 检测是否支持HTML5中的Video标签

    //检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...

  5. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  6. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  7. HTML5新增的音频标签、视频标签

    我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: <audio autopla ...

  8. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...

  9. 小强的HTML5移动开发之路(15)——HTML5中的音频

    浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准. ...

随机推荐

  1. NVIDIA Jetson TX2刷机

    官方安装教程 JetPack下载 主机端环境准备 需要在PC端安装虚拟机,虚拟机中安装Ubuntu14.04系统. 按照上面的地址下载JetPack-L4T-3.1-linux-x64.run 主机端 ...

  2. Object类和包装类的一些方法

    一.instanceof关键字的使用: a instanceof A:判断对象a是否是类A的实例.如果是,返回true:如果不是,返回false. 使用场景:为了避免在向下转型时出现ClassCast ...

  3. 神奇的树上启发式合并 (dsu on tree)

    参考资料 https://www.cnblogs.com/zhoushuyu/p/9069164.html https://www.cnblogs.com/candy99/p/dsuontree.ht ...

  4. C#集合之可观察的集合

    如果需要集合中的元素何时删除或添加的信息,可以使用ObservableCollection<T>类.这个类是为WPF定义的,这样UI就可以得知集合的变化.这个类在程序集WindowsBas ...

  5. Oracle WebLogic Server 12c 新特性

    美国时间2011年 12月9日,Oracle公司正式发布WebLogic 12c版本,c是cloud的缩写.截止当前(2013年8月)最新版本为Oracle WebLogic Server 12c ( ...

  6. adb的常用命令及如何查看被占用的端口

    adb是什么?:adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.a ...

  7. c#操作mysql

    using System; using MySql.Data; using MySql.Data.MySqlClient; using System.Data; using System.Linq; ...

  8. EC2 Instance扩容EBS卷容量

    EC2实例运行一段时间后,由于日志和一些应用程序数据的积累,可能出现之前预留的磁盘容量不够需要扩容的情况.AWS EBS目前还不支持在线扩容,不过可以通过结合snapshot来实现. 如,我的EC2 ...

  9. linux install tomcat

    折腾了好久,按照官网的安装流程安装了不止3次,发现还是不能成功,最终发现是linux机器本身的问题,因为我用的公司的virtual machine,可能是机器本身在一次迁移的过程当中出现了问题,导致了 ...

  10. 1 复习ha相关 + weekend110的hive的元数据库mysql方式安装配置(完全正确配法)(CentOS版本)(包含卸载系统自带的MySQL)

    本博文的主要内容是: .复习HA相关 .MySQL数据库 .先在MySQL数据库中建立hive数据库 .hive的配置 以下是Apache Hadoop HA的总结.分为hdfs HA和yarn HA ...