About the problem of video, audio tags and progress bar in Html5

 This article is reproduced from http://www.html5website.com/about-the-problem-of-video-audio-tags-and-progress-bar-in-html5/
 http://www.html5website.com/about-the-problem-of-video-audio-tags-and-progress-bar-in-html5/


In recent projects using video and audio tags of Html5 to play online video and audio files,encountered a problem that is after the play on the page,displayed progress bar is invalid.

When I check the w3c, find the HTML code is no problem.Then I thought of a way, that is, if the static html using the video tag displays the local file progress bar maybe can use it?

When I tried it, I found that really can be use.Then F12 View playback local video playback and play project network response,what is the difference between them?I found that the response header have more things,Then add these things one by one to the backend code, and finally succeeded!

JavaScript Code
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”);

 This article is reproduced from http://www.html5website.com/about-the-problem-of-video-audio-tags-and-progress-bar-in-html5/
 http://www.html5website.com/about-the-problem-of-video-audio-tags-and-progress-bar-in-html5/