Video.js: MP4 video is not playing in safari with code 4 error

[ar3balaji]

Description

I am trying to play a mp4 video in safari using videojs. after the page loads the console shows code 4 error with "The media could not be loaded, either because the server or network failed or because the format is not supported."

Same .mp4 video without videojs plays perfectly fine in safari.

versions

Video.js 5.10.2
safari

[gkatsev]

What version of safari are you running? And what version of videojs are you using?
Also, we probably won't be able to help you without seeing a reduced test case. The symptom probably means that either the mp4 is not encoded correctly for safari to play it back or it's not hosted in a way that works with the way that safari wants to request the mp4.

[ar3balaji]

Safari version is Version 9.1.1
Video.js 5.10.2

This is the console error i get.
"ERROR:"
"(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)"
"The media could not be loaded, either because the server or network failed or because the format is not supported."
MediaError {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported.", status: null, MEDIA_ERR_CUSTOM: 0, MEDIA_ERR_ABORTED: 1, …}

[ar3balaji]

note without videojs, just plain video tag plays the same video in safari

[andreassp]

i have the same problem with mp4 on safari 9.1 with video.js 5.9.2.. and on any ios device.
is the best workaround to have an additional video tag (and hide it somehow from others)?

[ar3balaji]

I used to face this issue. At last found this issue is more related to server, mainly options for streaming videos suitable for safari and chrome to support multiple browsers

[andreassp]

@balajisuiaji474
ok - do you have an idea, which settings in particular?
I tried this on several hosts with the same result

[gkatsev]

A first guess would be a host that allows byte-range requests to the file.
Closing this issue because it's unlikely to require a change to videojs itself. However, we can still continue the discussion here and if it turns out to actually be an issue with videojs, we can re-open the issue.

[BrunoFenzl]

I'm also getting this error with mp4.

I'm using

• Videojs 5.11.6
• Safari 9.3
• chrome mobile 53

Video works fine on desktop. all browsers. on mobile I get on the aforementioned browsers:
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

Any hint on how to deal with this?

[mister-ben]

These sort of issues with files and how they're delivered are often due to:

• not being MP4 with h264 and acc (some browsers may play other codecs, others not)
• the server not sending a Content-type: video/mp4 header
• the server not handling range requests correctly

[mh4ck]

I've got the same issue.

VIDEOJS: (4)
"ERROR:"
"(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)"
"The media could not be loaded, either because the server or network failed or because the format is not supported."

My server is sending the Content-Type, Accept-Range and Content-Range header.

Content-Type: video/mp4
Accept-Range: bytes
Content-Range: bytes 0-1/2
Content-Length: 2
Status Code: 206

The VideoJS script in Safari sends this Request Headers

Range: bytes=0-1
Referer: ....
Accept-Encoding: identity
Accept: /
Connection: Keep-Alive
User-Agent: ...

Found no fix yet. Maybe somebody can work with this informations.

A strange thing is that Safari seems to send two other get request to the video route after the 206 request without any headers and gets an error there. (with no http response status from the server)

Fixed it
By adding the correct full file length to the Content-Range header

Content-Range: 0-1000/5600 <--- last is full filelength

[Hookkid]

Hi!

I am facing a similar issue hosting an app on heroku however I'm trying to play an HLS video. The video plays fine on chrome for desktop but i get

video.js:22963 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

when I try to open the page on chrome on a mobile.

this can be observed in a couple of sites i have online:

• https://bpblog.herokuapp.com/
• https://playview.herokuapp.com/

Any tips?

[seabasss]

@MJunghenn How did you add the "full file length to the Content-Range header"? I'm having similar issues with videos not playing and want to try this. You edit the actual video file's metadata somehow or code in your webapp? Thanks!

[mh4ck]

@seabasss

I've fixed it by adding the full file size in the content range header server side.

[seabasss]

@MJunghenn Thanks! How do you do that?

This is driving me crazy! Seemingly normal mp4s are playing perfectly in Chrome and Firefox but not in Safari. Anyone has a solution to this? It plays without videojs, so is there something that can be changed in the videojs code? Thank you!

[tiaferra91]

Hi Guys,
I don't know if someone still need help with this issue but i think we found what's the problem with Safari and videos with 'mp4' extension.
It seems that Safari can't play mp4 videos over http protocol when someone is using an html5 player.

• We tried with a player based on flash with a video linked using http and it worked
• We tried using an html5 player with https linked video and it worked
• We tried using an html5 player and and http video resource and it HAS NOT WORKED.

We also checked other sites and another solution is to use m3u8 extension for videos over http.
But you need to convert every mp4 video you upload and the old resources uploaded to your site if you want to use them again.

I hope this helps.
Peace!

[aamorozov]

@tiaferra91's answer is correct - if all suggestions don't make the video work for you try testing on https resource

[djlxiaoshi]

@tiaferra91 you solved my problem. when i use https it works, thanks

[HerokunTan]

@tiaferra91 thanks!!

[damjan25]

@tiaferra91 is there a way to catch this error and somehow close the player ? Because right now I have blank player and cant close it.