-
Notifications
You must be signed in to change notification settings - Fork 394
Description
Describe the bug
When the poster attribute isn't specified on the Player component, the first frame is not shown as the poster frame on iOS (Safari or Chrome). Instead, the poster frame is just black.
To Reproduce
Steps to reproduce the behavior:
- Create a
Playercomponent with a validsrcattribute and noposterspecified. - View the component on an iOS device.
- See error—a black background instead of the first frame of the video.
Note: test with a video that doesn't fade from black in its first frame.
Expected behavior
The poster frame is the first frame of the video if not specified.
Screenshots
Here is the same site on desktop (Chrome) and mobile (Safari on iOS).
The first video component does not have a poster specified but the second video does.
Desktop (please complete the following information):
- OS: iOS
- Browser: Chrome and Safari tested
- Version: 13.1.3 (also tested on an iPad running iOS 12.4, identical bug)
Additional context
I have not been able to reproduce this bug with any desktop tools for testing "mobile view", such as the Chrome dev console's "responsive" view or Safari's "Responsive Design Mode". You must view the examples on a device running iOS.
Demo
Several examples below with two Player components—one with no poster specified, and the other with one specified. The first video will show a black background rather than the first frame on iOS devices.
- Fork of example CodeSandbox
- View the actual preview on iOS: https://02rlm.csb.app/
- GatsbyJS example
- View the actual preview on iOS: https://t7i0v.sse.codesandbox.io/

