"The media could not be loaded either because the server or network failed..." appears on all browsers on OS X

[CoWinkKeyDinkInc]

I've tried to load my HTML file on by locally hosting the files on mo computer by just doing a drag and drop on the tab thing view them. All browsers I've used, Chrome, Opera, Firefox and Safari give the error message, "The media could not be loaded either because the server or network failed or because the format is not supported". The loading circle also spins while this is happening. In Safari, the black background has this large grey gradient pattern on it for some reason. I have a .mp4 file and a .webm file.

[CoWinkKeyDinkInc]

I figured out that I used single quotes instead of double quotes in my source tag.

[mutsdagit]

Hi, I'm also getting this error. Which source tag are you referring to? I'm using a Brightcove player.

[CoWinkKeyDinkInc]

@mutsdagit In examples that video.js has, the type attribute where you tell what format the video is in single quotes and not double quotes, I found that the video would play if you use double quotes like every other attribute. That or because I left a slash in the front of the link to the video.

[mutsdagit]

Thanks @CoWinkKeyDinkInc ! I'll try that one.

[ideadx]

No luck in safari, any other fix?

[LanceGin]

I got the same problem......ahhh,,,,,,,how can I solve it ????????

[mister-ben]

A reproducible, minimal test case always helps.

[kjkta]

It's likely your webserver isn't configured to handle the video format in the way safari wants it. Have you tried serving it from a cdn?

[OrNot]

@kjkta what configuration of the server should be set to make safari happy? I run into the same issue .

[ajahongir]

Having same issue.

[S66D]

Same, also affecting the iOS devises.

[mmcc]

As @mister-ben said, we can't do anything to help you all without more information. You could be seeing this error for a staggering number of reasons, so "samesies" and "+1" simply does not help. For example, @S66D with the iOS problems could be delivering a h264 mp4 encoded using [email protected] and the file would probably play back fine in any browser or even an iPhone >6, but fail on every iPhone <=5.

99/100 times the answer to this question is, unfortunately, going to be something along the lines of "that source isn't going to work on that browser / device" or "re-encode the source file." :(

[OrNot]

hi,  I have forgotten the details on that issue, but I finally solved it . Here is the post on it :  mp4 not able to load in mobile browser

|
|
|
|

|

|
|
| |
mp4 not able to load in mobile browser

1. I have a mp4 file , which can be played here: http://php.weilomo.com/html/index.html both in mobile and desk... | |

|

|

Hope it helps

On Friday, October 14, 2016 5:48 PM, Jakhongir Alimov(ajahongir) <[email protected]> wrote:

Having same issue.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[ngocketit]

Hmm, I got the same issue but in a Webview on Android when trying to exit fullscreen mode with the back button. It's funny that the video is still playing while the error text shows up.

[dbeqiraj]

I also had this problem. The solution for me was to not open the html file with double click, but in a web server.

[safanmomin]

@OrNot Can you please share the code or how did you resolve that issue I am facing the same issue. Your response would be appreciated.
Thanks in advance!

[Vaporexpress]

I'm facing the same issue with a local mp4 video with codec ADTS (merged TS in a mp4)

[gkatsev]

Most browsers cannot play back ADTS audio, Your best bet is to re-encode to mp3 or aac audio.

[Neighbouring]

I figured out that I used single quotes instead of double quotes in my source tag.

Its working! I´ve just change to double quotes and it works! Tks!

[anasalpure]

The media could not be loaded, either because the server or network failed or because the format is not supported.
in console {
index.js:1 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. MediaError
}
/****************************************
i am working in React js project and this issue happens on most browser except Google Chrome
and my Videos is stored locally

sources: [{
src: "/static/video/3.mp4",
type: "video/mp4"
}],

***************************************/

`class Player extends Component {
componentDidMount () {
// instantiate Video.js
this.player = videojs(this.videoNode, this.props.options, function onPlayerReady () {
console.log('onPlayerReady')
})
}

// destroy player on unmount
componentWillUnmount () {
if (this.player) {
this.player.dispose()
}
}

// wrap the player in a div with a data-vjs-player attribute
// so videojs won't create additional wrapper in the DOM
// see #3856
render () {
return (

<video ref={node => (this.videoNode = node)} className='video-js' />

)
}
}`

[rockyxcoded]

I'm having same issue on mobile browsers.
I'm using Vue js
@anasalpure found any solution?

[Tutao1995]

how to resolve it?

[peyc5]

anyone solved this? i also have this problem only on android device opening my website with chrome.

[peterpetor]

I have the same problem.

[exm-svt]

Hi, same.

[luffy993]

Hi, I also get this problem when I try to see something on gounlimited.to

[dimer191996]

wtf can someone solve this shit

[gkatsev]

As far as we know this is "solved". The issue is that there are a variety of reasons why this error can occur, though, generally, it is due to a badly formed stream. Most HLS and a variety of DASH streams play properly. mp4 is playback is also available via the browser.
Unfortunately, without a specific video, we cannot help further.

For those encountering this issue, please check out https://docs.videojs.com/tutorial-troubleshooting.html first. If you still see a problem, open a new issue with a live reduced test case, be sure to make the media available as that's the most important part in helping us be able to track down the issue.