How to solve the problem of progress bar of video and audio tags in Html5

This article mainly shows you "how to solve the progress bar problem of video and audio tags in Html5", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn "how to solve the progress bar problem of video and audio tags in Html5".

Recently, Html5 video and audio tags are used in the project to play video and audio files online, but there is a strange problem. The progress bar is invalid after playing on the page.

After looking at the W3C, I found that the html code was no different, and then wondered if it would work if I used a static html to play the local file progress bar using the video tag.

Try to find that it can really be used, and then F12 to see what is the difference between playing the local video and playing the network response in the project, and find that there is something more in the response header, so add these things to the background code one by one, and finally succeed!

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 ") } these are all the contents of this article entitled "how to solve the progress bar problem of video and audio tags in Html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!