search

cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
9.39k stars 1.15k forks source link

webm not working on Safari Browser #1235

Closed elmcapp closed 1 year ago

elmcapp commented 3 years ago

I have React Application .webm videos will not play on Safari Browser. Other formats work just not .webm All it show is a play button with line in the middle.

goulkreek commented 3 years ago

Same with HLS urls (on safari macOS 14.1 (MacBook Pro / Mac mini) Playback works well on iOS devices & chrome (mobile & desktop)

(also pure <video> tag working well)

dmitrymatio commented 3 years ago

I believe it's safari itself and not React player as I have been battling with this issue the entire week.

I'm not an expert but my finding so far is that:

Safari won't play WebM (VP9 codec) but it will play .mov (HEVC h265 codec) as type QuickTime.

Safari might play mp4 files but depends on codec as well and not necessarily with audio.

If you need transparency, i.e., alpha channel videos, it has to be freshly exported as the previously mentioned HEVC h265 codec .mov file. If you compress/convert it there's a good chance it won't have alpha channel enabled afterward.

sonisourabh commented 1 year ago

Facing same issue on Safari 16

luwes commented 1 year ago

indeed this is the reason the url accepts an array. so you can define different formats to support all browsers. Safari doesn't support webm, try mov or mp4.

or move to video streaming like HLS or DASH which offers more benefits. see https://howvideo.works