How to use video and audio tags and progress bars in H5

This time I will bring you how to use videoand audio tags and progress bar in H5, video and audio tags and progress in H5 What are the precautions for using the article? The following is a practical case, let’s take a look.

In a recent project, I used the video and audio tags of Html5 to play video and audio files online, but I encountered a strange problem. The progress bar was invalid after playing on the page.

I found out after checking w3c There is no difference in the html code. Then I guess if I use static html and use the video tag to play the local file progress bar, will it work?

I tried it and found that it really works. Then F12 checked the difference between playing local video and playing the network response in the project. I found that there were some extra things in the response header. I added these things to the background code one by one. , and finally succeeded!

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");  
}

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use H5 to call the camera

How to use postMessage in H5 to transfer data between two web pages

The match() and search() in regular expressionsWhat are the specific functions and the match() and search() functions? What’s the difference?

The above is the detailed content of How to use video and audio tags and progress bars in H5. For more information, please follow other related articles on the PHP Chinese website!