feat: Use picture el for poster #7865
Conversation
Codecov Report
@@ Coverage Diff @@
## next #7865 +/- ##
==========================================
+ Coverage 81.91% 81.97% +0.05%
==========================================
Files 111 111
Lines 7344 7356 +12
Branches 1771 1776 +5
==========================================
+ Hits 6016 6030 +14
+ Misses 1328 1326 -2
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
src/js/poster-image.js
Outdated
| @@ -46,12 +46,16 @@ class PosterImage extends ClickableComponent { | |||
| * The element that gets created. | |||
| */ | |||
| createEl() { | |||
| const el = Dom.createEl('div', { | |||
| const crossOrigin = this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null; | |||
There was a problem hiding this comment.
Should we use the crossOrigin getter?
| const crossOrigin = this.player_.options_.crossOrigin || this.player_.options_.crossorigin || null; | |
| const crossOrigin = this.player_.crossOrigin() ?? null; |
There was a problem hiding this comment.
The poster can be set up before the getter will return a correct value, as it's dependent on the tech
There was a problem hiding this comment.
Ah, that's right. However, we should probably still use the getter first because otherwise, the value may be out of sync with the rest of the system.
src/js/player.js
Outdated
| if (this.posterImage) { | ||
| this.posterImage.$('img').crossOrigin = value; | ||
| } |
There was a problem hiding this comment.
thought: maybe PosterImage should have a crossOrigin getter/setter so that this piece can be moved into it?
if (this.posterImage) {
this.posterImage.crossOrigin(value);
}
If we do, we'll probably want to update the createEl below to use this option.
|
Updated to add a getter/setter to posterImage. The getter gets posterImage's value if the el has been created, otherwise the player/tech's vlaue if the tech is ready, otherwise from the player options. |
BREAKING CHANGE: This changes the DOM structure used for the video poster.
BREAKING CHANGE: This changes the DOM structure used for the video poster.
BREAKING CHANGE: This changes the DOM structure used for the video poster.
Description
Use a picture element instead of background image for the poster. Resolves issues some have had with the PosterImage and video el loading the poster differently.
Leaves scope to add support for source set for multiple image formats later, which could be done as a backwards-compatible minor.
Requirements Checklist