Video.js: Fullscreen player poster and no preload aspect ratio inconsistency

Created on 17 Sep 2020  路  7Comments  路  Source: videojs/video.js

Description

When hitting play for the first time, the poster is hidden revealing the video element which does not display with the correct aspect ratio briefly before playback begins. This is much more noticeable on slower connections.

Reduced test case

Steps to reproduce

When the follow criteria are met:

  1. Player's dimensions are not fixed pixel values (using viewport in example)
  2. preload is set to none
  3. poster attribute is set and matches video's aspect ratio

Hit play (in Chrome) and the issue should be visible.

Results

Expected

I expect the video element to display with the same aspect ratio as the poster.

Actual

The video element stretches the poster to a different aspect ratio before correcting itself.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

latest

browsers

Chrome 85.0.4183.83

OSes

macOS 10.15.5

plugins

N/A

browser bug

Most helpful comment

I can reproduce it if I set the connection to slow 3g before hitting play.
I can actually reproduce it without Video.js. Seems like this is a Chrome issue.

All 7 comments

I can reproduce it if I set the connection to slow 3g before hitting play.
I can actually reproduce it without Video.js. Seems like this is a Chrome issue.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Should we keep this issue open to continue tracking?

We can. Last I checked there wasn't a bug opened against chrome. Would be good to open a bug against it if one still doesn't exist.

I opened a bug with Chrome for this: https://crbug.com/1154296

Going to close this now as we have a crbug. I'll probably circle back here if the issue is ever fixed.

Awesome! Thanks for opening!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gfviegas picture gfviegas  路  3Comments

aagiulian picture aagiulian  路  3Comments

SolmazKh picture SolmazKh  路  4Comments

onigetoc picture onigetoc  路  4Comments

jeonghwaYoo picture jeonghwaYoo  路  3Comments