最近项目中使用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. 蒙版 mask

    一句话理解: "被蒙版"层 只显示的区域为: "蒙版"层中不透明的部分 (即:最终显示的内容是父层的, 区域大小受蒙版不透明部分控制)

  2. [Alpha]团队成员贡献分配规则

    设计参考 参考了往届团队sigma_rg.NewTeam.hotcode5.软剑攻城的四个评分规则后,希望该规则能队内减轻竞争的紧张气氛的同时,有具体的评分规则. 分配总则 基础分值固定为30分,将剩 ...

  3. [BZOJ 1937][Shoi2004]Mst 最小生成树

    传送门 $ \color{red} {solution:} $ 对于每条树边\(i\),其边权只可能变小,对于非树边\(j\),其边权只可能变大,所以对于任意非树边覆盖的树边有 \(wi - di & ...

  4. mongodb常用语法

    // Employee表 { "_id" : "9e794fb9-12dc-457c-8c5a-69fe45c57685", "No" : ...

  5. 文献综述十五:基于b/s中小型超市进销存管理系统的研究与设计

    一.基本信息 标题:基于b/s中小型超市进销存管理系统的研究与设计 时间:2015 出版源:湘西财经大学 文件分类:对超市管理系统的研究 二.研究背景 在竞争日益激烈的行业中,尽可能降低运营成本,逐步 ...

  6. vscode安装golang插件失败问题

    vscode安装golang插件失败问题 dlv go-outline go-symbols gocode-gomod gocode 代码补全 godef 代码跳转 golint gopkgs gor ...

  7. docker升级

    使用系统自带的docker源安装docker,安装的版本都是偏低的,因此需要进行版本升级 升级步骤如下: 1. 查找现主机上关于docker的已安装包, 若列出为空,跳过第2步 rpm -qa|gre ...

  8. btn按钮事件

    1.用Delegate 和 Event 来定义一个通用类来处理事件 (观察者模式) using System.Collections; using System.Collections.Generic ...

  9. 自动化测试之旅--selenium+python--001

    在学习selenium之前,首先感谢网络上的虫师和乙醇老师,或许他们并不知道我这个菜鸟的存在,但是我仍然要感谢他们,因为在学习的路上拜读了许多他们的博客和文章,对于我来说有着很重要的意义,因此在学习之 ...

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

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