Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First frame not shown as the poster on iOS Safari #328

Open
BillyBunn opened this issue Dec 13, 2019 · 2 comments
Open

First frame not shown as the poster on iOS Safari #328

BillyBunn opened this issue Dec 13, 2019 · 2 comments

Comments

@BillyBunn
Copy link

BillyBunn commented Dec 13, 2019

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:

  1. Create a Player component with a valid src attribute and no poster specified.
  2. View the component on an iOS device.
  3. 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
Screen Shot 2019-12-13 at 1 19 05 PM

Mobile
IMG_C5AA94FE571D-1

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.

@BillyBunn
Copy link
Author

A hacky work-around I've found is to use the Media Fragments URI to specify the starting time. Seems to have pretty good support.

Appending #t=0.1 to the end of my video source URLs does the trick for now. However, this method does seem to take longer to load the frame than the default HTML5 video behavior.

@porg
Copy link

porg commented Jun 27, 2023

Did React Video eventually / officially integrate that Media Fragment URL workaround to counter the Mobile Safari bug?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants