最近项目中使用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. MYSQL ERROR 1049 (42000): Unknown database

    https://www.cnblogs.com/hedgehog105/p/10196566.html lower_case_table_names=2

  2. centos的基本命令03(du 查看文件详情,echo清空文件内容)

    1:查看/etc/passwd的内容并打印出行号 强制退出vim编辑器  :q! 这个连续两个小符号, 他代表的是『结束的输入字符』的意思.这样当空行输入eof字符,输入自动结束,不用ctrl+D c ...

  3. Runas命令巧用

    Runas,从字面上看就知道,以谁的身份去run一个程序,那么他就是在当前登陆的Windows帐号下,以本地或者是域中的其他帐号的身份去运行一个程序.简明语法如下: Runas /user:usern ...

  4. 【后渗透】PowerSploit

    1.下载安装:git clone https://github.com/mattifestation/PowerSploit.git 2.搭建web服务器(如172.16.12.2),将powersp ...

  5. Windows与linux添加用户命令

    Windows 查看当前存在用户: net user 查看当前用户组: net localgroup 添加用户(以添加用户test密码test1234为例): net user test test12 ...

  6. pip和conda安装源更改

    pip和conda安装源更改 python模块安装,使用国内源可以提高下载速度. pip源更改: pip源有好几个,我一直用的清华的pip源,它5分钟同步一次. 临时使用: pip 后加参数 -i h ...

  7. VR内容是如何制作的!

    VR全景视频作为一种新型的视频方式,其震撼效果是毋庸置疑的.目前市场上的VR全景视频也不在少数,越来越多的人能够欣赏到精彩的内容. 首先呢, VR内容场景的呈现分为两种情况: 1.实景拍摄 2.3D建 ...

  8. 《大数据日知录》读书笔记-ch11大规模批处理系统

    MapReduce: 计算模型: 实例1:单词统计 实例2:链接反转 实例3:页面点击统计 系统架构: 在Map阶段还可以执行可选的Combiner操作,类似于Reduce,但是在Mapper sid ...

  9. Netty构建Http服务器

    Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性.换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络 ...

  10. 查看修复HDFS中丢失的块

    检测缺失块 hdfs fsck -list-corruptfileblocks hdfs fsck / | egrep -v '^\.+$' | grep -v eplica 查看上面某一个文件的情况 ...