ios iphone html5-video webkit mobile-webkit

Video recorded in android cannot play in IOS Using HTML Video tag

Update:
I record VP8 video from Android that is saved as MP4 format, which should be supported by Safari. From some research I know Opus audio format is partially supported by Safari...

What else do I need to add while saving file (eg: output settings)?
Is it because of the Opus audio format that Safari is not playing VP8 video format?

Question:

In my application which records the video from any device and saving in AWS server, and admin can play recorded videos from any os/ device.

After the iOS updated on Dec 14 2022, my video component is messed up, I cannot record or play video from Apple devices.

As I cannot write entire project code, I have the code in the below link

video player code - Github

In the code the video src is from AWS S3 (storage) which is recorded from Android phone, from the link below you can play the video.

video player testing

This video can be played in Mac Chrome, but not in Mac Safari, Apple Safari and Apple Chrome.

I am looking for quick solution.

Solution

I don't use and don't have access to iOS or Mac Safari, so you must test this for us...

Looking at your MP4 file in a hex editor I see this:

It seems you have a WebM file that simply has .mp4 added to the file name.
It is not an MP4 (there is no MPEG header/data inside these file bytes, etc).
Your file here has webm in second line something which a real MP4 would never do. A valid MP4 usually has ftyp written in its first line.

Possible solutions:

(1) To avoid confusing some decoders (about file format) try renaming file as:

159_159_1652901854.webm

Some players will use the file .type extension to decide which decoder to use. If it is file.mp4 and some player uses the MPEG decoder on those VP8 bytes then you will get no picture or sound.

(2) Also try to set correct WEBM mime-type (ie: because it's not a video/mp4)

<video height="700" controls muted autoplay playsinline loop>
<source src="https://api.tenrol.com/uploads/videos/159_159_1652901854.webm" type="video/webm">
</video>

note: consider testing a WebM video with no sound, to answer if Opus audio is the problem.

See if the above <video> tag code works on Mac Safari and iPad Safari. I think Opus (usually audio for OGV files) and Vorbis (usually audio for webM files) are not supported on iPhone (unless you put the audio in an MOV format, but then you lose the video part). Basically iPhone has no WebM sound.

(3) If all else fails then just understand the following:

MP4 plays in all major browsers.
MP4 contains H.264 or H.265 picture codecs, and also AAC or MP3 audio codecs.
Browsers prefer to record in their own in-house/licensed codecs.
(Google == WebM (VP8/9), Mozilla == OGV (Theora) and Apple == MP4 (H.264/H.265)).
Don't use Webm (Chrome/Firefox) if you want guaranteed Safari playback of video.
Don't use MP4/H265 (Safari) if you want guaranteed Chrome/Firefox video playback.

There is no easy solution. So your options are:

To guarantee that you get H264/MP4 encoded in Chrome/Firefox browsers, then try finding a Javascript based H.264 encoder. Here's a search example to start with. Then you also need an audio encoder for AAC or MP3 formats. Such a file would play in Safari.
Or else, push for getting WebM decoded by Safari browser (even if without sound). This means a lot of testing. Use a tool like FFmpeg to output short 10 second test videos of WebM (at different settings) until something displays. Then you can move onto dealing with sound.