Why won't Safari play file without extension in <video>?

Question

I have file named 52bbb58c without file extension and it is mp4 video.

When I try to add it as &<source> to <video> with attribute type (video/mp4), it doesn't play.

This works on Chrome and Firefox working. How do I fix it for Safari?

Hereinto

Answer 1

Safari is extremely fussy when it comes to playback of streamed media such as video and audio. It has the following requirements

• The server/application hosting the media MUST support byte ranges. Safari will do a trial download of 2 bytes to ascertain the media length, it will then download the media in one or more chunks depending on the size of the file. It won't play nice if you just send it all the data.
• The content range returned from the media server must include a figure for total media size and not just "*".
• The media URL MUST have a suffix matching the type of media. It's like IE all over again: getting the mime type right is a fruitless exercise because Safari isn't going to follow the rules here and it will ignore mime type.

Note that Safari doesn't tell you what the problem is if it fails on playback, there's just a media error raised with no further information.

For mpeg 4 video / h.264, the suffix .mp4 works For mpeg 4 audio / aac, the suffix .aac works

If you are a Safari dev please consider fixing these things.

This is tested on Safari 11.1.2

Beneficiary

It seems to work in macos Safari but not iOS Safari :( – Epicureanism

RE: The media URL MUST have a suffix matching the type of media. thank you for listing these reasons out. I was building out an audio recording interface using Browser API, and constructing a File object without giving it a filename or extension. The uploaded file does not play. After tinkering for a little bit, I added filename. Didn't work. Finally, I just hard coded a .mp3 onto the filename when constructing the File object. It worked! – Jalbert

Answer 2

After looking at this problem elsewhere in some detail (see link below) I think the most likely reason is that Chrome and IE assume that the 'type=video/mp4' info in the HTML is correct and hence interpret the content returned from the server in this way, while Safari looks at the content type in the response to make its decision.

In other words, Chrome plays the returned file as video even though the HTTP response from the server has a header saying 'Content-Type:application/octet-stream' rather than 'Content-Type:video/mp4'.

You can check this by looking at the response headers for your example and seeing if the content type is set to 'application/octet-stream' rather than 'video/mp4'.

Related answer: https://mcmap.net/q/1559357/-how-to-play-a-video-from-url-with-no-file-extension-in-ios

Uptotheminute

My video API content type is already video/mp4 yet the videos are not getting played in Safari/MacOs. – Landlordism

@SibeeshVenu - take a look at David'd more recent answer. It has more up to date info and more detail and may help you. If not then its probably best to open a question and if possible include a link to an example video which will not play. – Uptotheminute

Answer 3

I've encountered the similar problem. In my case, it works well on Chrome and Firefox, or when I put an extension to the file. If I change mime type correctly, it still doesn't go through.

Actually I had a server we deployed return Response Header like the following.

HTTP/1.1 206 Partial Content
Date: Mon, 05 Mar 2018 08:33:49 GMT
Server: gunicorn/19.7.1
X-Powered-By: Express
content-type: video/mp4
accept-ranges: bytes
content-length: 2
content-range: bytes 0-1/37475549
Cache-Control: public, max-age=0
Connection: keep-alive

The Response Header itself is certainly correct.

However, there was a difference between the size which our server actually returned and content-length and content-range. So as of now, it works well because I fixed that. If you are in the same situation of mine, the bug will be reproduced with curl --range 0-1 <target URL>.

It will say like this error 18: transfer closed with outstanding read data remaining

So an answer is to confirm the values returned by your server properly.

Reference

curl error 18 - transfer closed with outstanding read data remaining

Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6

https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

https://github.com/WebKit/webkit/blob/5277f6fb92b0c03958265d24a7692142f7bdeaf8/LayoutTests/imported/w3c/web-platform-tests/fetch/http-cache/partial.html

https://github.com/w3c/web-platform-tests/blob/master/fetch/http-cache/partial.html

Morentz

Answer 4

Actually, the Safari browser don't support every MP4 format video.

MP4 is just a file format, not a video codec type.

You could use ffmpeg to get the infomation of a video.

For me, I found that Safari could play the MP4 video of the following video codec:

ffmpeg -i demo3.mp4 -hide_banner
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'demo3.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.20.100
    description     : Codec by Bilibili XCode Worker v4.7.18(fixed_gap:False)
  Duration: 00:00:54.44, start: 0.000000, bitrate: 772 kb/s
    Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 852x480 [SAR 640:639 DAR 16:9], 635 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
At least one output file must be specified

You should notice the KeyWord Video: h264(High)。 And for the video could not play on Safari:

ffmpeg -i demo3_mask.mp4 -hide_banner
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'demo3_mask.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.20.100
  Duration: 00:00:54.33, start: 0.000000, bitrate: 630 kb/s
    Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuvj444p(pc), 852x480, 627 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler

The KeyWord is Video: h264(High 4:4:4 Predictive). As for codec types, you could refer to wiki or here.

And if this is your situation, you could transform the video codec type with ffmpeg with the following command:

ffmpeg -i demo3_mask.mp4 -vf "scale=2*trunc(iw/2):-2,setsar=1" -profile:v high -pix_fmt yuv420p out2.mp4

And you could check the infomation of the new video:

ffmpeg -i out2.mp4 -hide_banner
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'out2.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.20.100
  Duration: 00:00:54.33, start: 0.000000, bitrate: 221 kb/s
    Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 852x480 [SAR 1:1 DAR 71:40], 218 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler
At least one output file must be specified

Hope this help.

Zwart