@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");
}
来源
原博客
更多推荐
HTML5 <VIDEO>标签 音频视频 进度条无法正常使用问题
发布评论