React Player is not Working in Safari for all the video format

[krishnadmass]

when using ReactPlayer the video is not playing in safari browser only and it shows like broken player it does not catch the error in onError handler, and the video is working fine in all other browsers(chrome, firefox, opera) is there any solution to solve this?

[cookpete]

What format is the file you are trying to play? Sounds like #1158

[krishnadmass]

What format is the file you are trying to play? Sounds like #1158

tried with mp4 and webm it not playing in safari only

[worstestes]

Currently facing the same issue with all video formats for safari, chrome/firefox seem to have no issues. Any tips here?

[AndrewNow]

likewise, I can't get videos to work properly on safari.

[Dhamu143]

Hey guys, is there any update on this? I am also facing the same issue.

[cookpete]

Can someone post some more information? MP4 and WEBM files are working fine for me. macOS 11.6 Safari 15.0

[aroolinks]

Currently facing the same issue with all video formats for safari, any solution? How we can sort it out?

[paul-bg]

I have the same issue the player work well in chrome and Firefox but in safari Mac or iOS it appears with a blocked player

here the link of the implementation
https://xdsea.com/nft/0x85d216d87C993c250A7725aF8f6C161d0504c32B/1673

and its weird cause the demo page works in Mac and Iphone safari

[reynoldsnlp]

@paul-bg I am having a similar problem. I'm just getting started with debugging, but it looks like this blog post might be helpful: https://blog.logrocket.com/streaming-video-in-safari/

[reynoldsnlp]

It could be a back-end problem, i.e. whether the server supports Partial Content.

[daniel-j-dev]

Similar problem - can't play .ogg files on Safari

[cookpete]

Looks like ogg support is not great on Safari.

I’m gonna close this for now as it just seems like issues with Safari video support.

If anyone can isolate a specific problem with this library, that isn’t just a general support problem with Safari, with steps to reproduce or a jsfiddle/codesandbox, please reopen the issue with more details.

[reynoldsnlp]

For anyone else coming across this, you may also want to make sure your server is putting MIME content type in the headers: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

[PragathiPrabhu]

Can’t play hls video in safari. Did anyone face this issue in safari ?

[apoorvdodiya]

In my case

1. there was an issue from backend side, I was reading the the only the start value of the range header from the first request which did not matched in the response.

The thing is that Chrome sends range="0-" for the first request and Safari sends range="0-1" so my solution worked for Chrome for the first time and then I identified and fiexed the issue for Safari.

2. After fixing the first issue I could not play .mkv files because HTML 5 does not support it.

[schwarzsky]

Can't play even MP4 videos on safari with no back-end. Just serving files from public directory.

[rezadadashian2]

In my case

1. there was an issue from backend side, I was reading the the only the start value of the `range` header from the first request which did not matched in the response.

The thing is that Chrome sends range="0-" for the first request and Safari sends range="0-1" so my solution worked for Chrome for the first time and then I identified and fiexed the issue for Safari.

2. After fixing the first issue I could not play `.mkv` files because HTML 5 does not support it.

hi,

how did you resolve the backend problem? about the range header?

[reynoldsnlp]

@rezadadashian2 Your server needs to respond with a 206 Partial Content with only the requested length of data. You might find this blog post helpful.

You need Content-Type headers, 206 Partial Content responses, and file extensions in the URL.