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
8.89k stars 1.12k forks source link

Iphone Saving Battery Mode not autoplaying video in DOM #1766

Closed davidpino-gj closed 3 weeks ago

davidpino-gj commented 1 month ago

Be sure to search for your issue before opening a new one.

Current Behavior

When my APP renders, the video from the MediaStream is being auto played and works just fine in all SO's and Devices, however, when my iPhone is on Saving Battery Mode, the video does not play and just shows a full blank container with a play button in the center (that doesn't work either)

image

Expected Behavior

The video should autoplay just fine in Saving Battery Mode

image

Environment

Other Information

Code Snippet:

<ReactPlayer url={mediaStream} height={'100%'} width={'100%'} controls={false} playing={true} muted={true} pip={isEnabled} playsinline={true} onEnablePIP={() => setEnabled(true)} onDisablePIP={() => { setEnabled(false) if (isIOS) { const videoTrack = CallService.getCurrentVideoTrack() const mediaStream = new MediaStream([videoTrack.getMediaStreamTrack()]) agoraDispatch({ type: 'setMediaStream', payload: { mediaStream: null, }, }) agoraDispatch({ type: 'setMediaStream', payload: { mediaStream, }, }) } }} config={{ file: { attributes: { style: { position: 'static', objectFit: 'cover', height: '100%', width: '100%', }, }, }, }} />

   If anyone could help me with this, I'd be very grateful. Thanks.
davidpino-gj commented 1 month ago

If I add the autoplay attribute (true or false) in my config prop, the play button dissapears but the issue remains.

config={{ file: { attributes: { autoplay: true, style: { position: 'static', objectFit: 'cover', height: '100%', width: '100%', }, }, }, }}

image

AlbertSmit commented 1 month ago

This is by Apple's design in iOS' Safari; I don't think there is a way around it. A user interaction is required to start the video.