html audio标签无效,HTML5的audio标签设置currentTime无效解决方案

上帝视角看民宿产业 - 马化腾

00:00 01:06

在firefox、IE、中都有效，但是在chrome中无效，

原因：这是一个与服务器有关的chrome报错

解决方案：

1、将的src引用的视频最好是在线网站视频完整引用地址 //(亲自测试有效)，查找在线音乐地址的方法：输入music.163.com打开，搜索音乐，如《偏爱》，右键查看元素，Network-->Media-->点击Name下的资源，复制右边Headers/General的request url，然后复制到src。

2、测试用的音频是本地地址，把音频/视频放到服务器，使用http://的播放地址就不再出现这个问题了。

具体来说，使用Intellij IDEA自带的服务器时(即IDEA直接打开html文件，鼠标移到编辑器的右上区域，出现一个有若干浏览器图标的横条，点击chrome图标，会使用idea自带的文件服务器用chrome打开，端口是63342)，在chrome下拖动进度条也会出现跳到开头0S重新播放的问题，用IE11却正常。

然后我试了另外一个hfs服务器(Http file server，是一个软件，并不是tomcat apache nginx之类的一个新的服务器，正好有这个软件顺便试一下)，chrome下拖动完全正常。所以猜测原因是和服务器有关，具体来说可能是下载mp3文件时的http response header有关。下面是以上两种服务器的response header:

【IDEA自带服务器】HTTP/1.1 200 OK

Content-Type: audio/mpeg

server: IntelliJ IDEA 14.1.7

date: Thu, 02 Feb 2017 12:03:10 GMT

X-Frame-Options: SameOrigin

X-Content-Type-Options: nosniff

x-xss-protection: 1; mode=block

cache-control: private, must-revalidate

last-modified: Sat, 28 Jan 2017 14:37:02 GMT

content-length: 3694385

【hfs服务器】HTTP/1.1 200 OK

Content-Type: application/octet-stream

Content-Length: 3694385

Accept-Ranges: bytes

Server: HFS 2.3d

Last-Modified: Sat, 28 Jan 2017 14:37:02 GMT

Content-Disposition: attachment; filename="%CB%B3%C1%F7%B6%F8%CF%C2 - %D5%C5%F6%A6%D3%B1 %CD%F2%BC%D2%C3

本文由职坐标整理发布，关注HTML5/CSS3频道，学习更多的前端知识！