Video showing black screen on Ios while playing

[hhovakimyan]

Current Behavior

Sometimes when playing videos in Ios a black screen is being shown while the video is playing. So we can hear the audio but see black screen instead of the video(See the bug reproduction video attached). The video is being loaded from AWS. The integration code is

import ReactPlayer from 'react-player';

<ReactPlayer
        config={{
          file: {
            forceVideo: true,
            attributes: {
              poster: 'Some external image URL',
              preload: 'metadata',
            },
          },
        }}
        playsinline
        playing={true}
        width='100vw'
        url={`Some external video URL`}
      />

Environment

• URL attempting to play: https://app.starnewsmobile.com/creator-channel/5
• Browser: Safari
• Operating system: Ios 17

https://github.com/cookpete/react-player/assets/30544850/338b24f2-ad27-41e9-87b8-115ba859d4e2

[amitava82]

I see same behavior. If you exit the video and play again it works fine. I've verified this is issue with IOS 17. Works fine with 16.5

[moloko]

I've just stumbled across this issue whilst researching a very similar issue I'm having in my own react application (which uses the native video controls when running in Safari on iOS). So even though I'm not using react-player I thought this information might be helpful...

For me it seems to occur only when:

• the video has a poster image set
• the user taps the webkit 'play' control (i.e. it doesn't occur if they tap anywhere else on the <video> element)
• the playsinline attribute is NOT set

Frustratingly I can't replicate the issue outside of my application - either in a pure HTML5 video or in a React app that renders a <video> element.

But I am wondering if it's something that's been caused by a recent iOS update as it seems unlikely that it hasn't been noticed & reported before (this application has hundreds of thousands of users).

Oh, in my app it also works fine if you exit the video then play again. I also noticed that if I switch to picture-in-picture it plays back fine.

I'm running iOS v17.3.1

[amitava82]

Sounds like Apple broke video api. I was reading few threads in apple forum which sounded similar issue.

[moloko]

@amitava82 a colleague with an iPhone still running iOS 16.4.1 just tested and couldn't replicate the issue so yeah I think something is broken in mobile safari.

Also note that in @hhovakimyan 's config playsinline is set but in the screen recording it looks to be opening in the full screen player

[OmauryMarmolejo]

Hello!

I had a similar issue with Safari and Chrome in my app on iOS 17. However, I noticed the video works as expected when the poster attribute is removed. That could be a temporary workaround. I hope this helps someone.