Skip to content

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

@BillyBunn

Description

@BillyBunn

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions