HTML5 ＜VIDEO＞标签 音频视频 进度条无法正常使用问题

@HTML5 <VIDEO>标签 音频视频 进度条无法正常使用问题

html

<video id='previewVideo' autoplay controls="controls" style="width: 100%;height: 100%;" controlslist="nodownload">
		浏览器不支持HTML5
</video>

js

<script type="text/javascript">
	var urlVedio = '/xxx/xxxx.mp4';
	document.getElementById('previewVideo').src = urlVedio;
</script>

现象

网页播放器能够正常播放文件，但是播放器的进度条只能显示进度，没办法拖动。
查看了菜鸟教程、W3C官网<video>标签相关文档，排除了html和js问题。

解决方案

根据@mulujute 的博客，找到问题所在和解决方案，发现是响应头缺少了一些属性如下：

response.setHeader("Cache-Control","max-age=31536000, must-revalidate");
if (fileName.contains(".mp4")) {
   response.setContentType("video/mpeg4");
}
if (fileName.contains(".mp3")) {
   response.setContentType("audio/mpeg");
   response.setHeader("Accept-Ranges:", "bytes");
}

来源

原博客