What should I do if the video tag of html5 cannot be played?

The solution to the problem that the video tag of html5 cannot be played: 1. Use the video screenshot to make a play button and occupy the original position of the video; 2. Monitor the click event of the occupying button and use "video.play() "; 3. Just hide the placeholder image and loading.

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

What should I do if the video tag of html5 cannot be played?

IOS-HTML5-Video tag cannot be played

h5 video tag cannot be played in UIwebview, Safari can,

some It works on mobile phones, but not on some mobile phones.

is consistent with video.js. I don’t mind introducing a compatibility package. If you want to have a better experience,

is recommended to use https://videojs.com/

If you want to experience the principle yourself, you can copy the demo code at the end of the article and run it

The traditional method is to write the video tag in HTML and click to play it

 // ?vframe/jpg/offset/5 这个是七牛接口，取截图用的，5就是第5秒截图

BUT, so It won't work when written on IOS 10.3.2/3 11.x.x. iPhone 6/6p 7 and other test machines, but it will work on personal mobile phones. Some phones can work and some phones can't.

After modification:

Step 1: Use the video screenshot to create a play button to occupy the original position of the video

Step 2: Monitor the occupied Click event of the button, use video.play(), you can see that the video has been requested and loaded

Step 3: There is a promise for the loading video, then put the placeholder Just hide the image and loading

#tips:

• Different mobile phones/systems will have different request ranges, which are generally divided into 3 -5 206 requests.

• console.time("loading milliseconds"); You can see the loading time, which is basically the same as what Charles captured.

• Different mobile phones/systems will also have different then performances. Some will return as soon as one click, and some will need to wait until the video is fully loaded before returning.

• The attributes of the video DOM can be used to get how much is currently loaded and the total amount. Divide by one to get the percentage. For specific attributes, you can see> https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ video

Online address: http://m.soyoung.com/item/detail?type=0&sys=3&item_id=263&cityId=0

demo code (convenient Some friends sent private messages and wanted to take the demo directly~)

Recommended study: "HTML5 Video Tutorial"

The above is the detailed content of What should I do if the video tag of html5 cannot be played?. For more information, please follow other related articles on the PHP Chinese website!