-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Video showing black screen on Ios while playing #1785
-
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
RPReplay_Final1705303082.mp4
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 9 comments
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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
playsinlineattribute 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
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
Sounds like Apple broke video api. I was reading few threads in apple forum which sounded similar issue.
Beta Was this translation helpful? Give feedback.
All reactions
-
@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
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 4 -
👎 1
-
Did anyone found a solution for the above ?
Beta Was this translation helpful? Give feedback.
All reactions
-
I have the same issue with Vimeo embeds on iOS 17.5.1. I
Have checked my embeds on older version of iOS (16.2) and they go to full screen no problem.
It's inconsistent, sometimes ok, other times a blank screen with audio.
Beta Was this translation helpful? Give feedback.
All reactions
-
Had a similar issue on Android. Embedded video could not be started at all. Setting playsinline attribute to true fixed the problem.
Beta Was this translation helpful? Give feedback.
All reactions
-
I am not user of it but I've had the issue on video using videoJS. Try playsinline attribute.
In some rare cases, check whether the phone is in low battery (Adam Comment).
Beta Was this translation helpful? Give feedback.