[Tag bug] The problem that some mp4 files in the video tag cannot be played automatically in ios

On the Android side and the h5 page debugging side, the mp4 format files under the video tag can be played, but the mp4 files in the video tag part cannot be played automatically in ios. I searched a lot of information and found the following solution.

Front-end solution

<video :src="item.url" muted autoplay loop preload
       x5-video-player-fullscreen="true"
       x5-playsinline
       playsinline 
       webkit-playsinline></video>

The first four attributes:
muted: mute playback, the general browser chrome as an example, the user needs to operate on the page once to play the video, and the user is not allowed to directly display the sound after entering autoplay: autoplay
loop
: loop playback
preload: preload playback , the default attribute value is auto. to cache large files. It has three optional values: "none" does not cache, "auto" caches, ";metadata" only caches the last four attributes of the file meta information
, which is the front-end solution seen when consulting the data. The author added the last four attributes , ios can play
x5-video-player-fullscreen="true": full-screen setting, set to true is the default full-screen playback, the default full-screen playback of videos in ios web pages playsinline="
true" webkit-playsinline="true solves ios automatically Play full screen problem
x5-video-player-type="h5" x5-video-player-fullscreen="true" Solve the same level of Android playback

Backend solution

1. Scenario description
The server uploads an MP4 video file, and the iOS client plays the video file through the URL.
2. Description of the problem
Android phones can play videos normally, but iOS phones cannot play videos, and the safari browser on PCs cannot play them either.
3. Problem analysis
(1) MP4 files can be played through the internal network ip address, but MP4 files cannot be played using the external network domain name.
(2) Use the external domain name to obtain the MP4 file path through the Nginx proxy.
(3) Safari does not support the entire file stream, the server must support segmented requests.
(4) Safari's request for the file stream needs to include a request header Range and a response header Content-Range, and no information about Range is returned after being proxied by Nginx.
4. Solution
First, configure Nginx to support the return of Range tags, just add the line add_header Accept-Ranges bytes:
server { listen 80; location ~xxx{ add_header Accept-Ranges bytes; } After enabling, iOS requests MP4 video files, Nginx will return information related to Range.

When searching for information, I found the solution that iOS cannot play MP4 video files. What should I do if mp4 video cannot be played on iphone