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

(WIP) feat: Allow picture sources to be set on poster #8052

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

mister-ben
Copy link
Contributor

Now that the PosterImage uses a poster, we can make use of it to support multiple image formats. Very much a work in progress, needs tests, and there may well be edge cases yet to be considered.

Changes:

  • The argument to the poster() setter may now be a poster options object. A string is still supported to be non-breaking.
  • The poster options object should specify an array of objects as sources. The object properties will be used as attributes of <source> elements of the PosterImage's <picture>.
  • The poster options object may include a string img, which is the src used for the <picture>'s <img>. If sources is set and img is not, img is set to the last item in sources.
  • The poster options object may include a string alt, so alt text can be set on the <img>.
  • The poster options object may also be passed as a player setup option, posterOptions.
  • Adds a posterOpts() getter to fetch the poster options. However this is not a setter, since the options are set with poster().
  • if sources are used, poster() as a getter will return the image actually used.
  • If sources are used, the poster attribute is not set on the tech, so the tech and poster do not load different images.
  • If sources are not used, the poster attriute is optionally not set if a new player option noTechPoster is set to true. This is useful since the poster now uses laszy loading, so the video el doesn't load the image.

Examples

// Works as currently
player.poster('https://example.com/image.jpeg');
// Would have the same effect
player.poster({img: 'https://example.com/image.jpeg'});
// Would set a poster, and its alt text
player.poster({img: 'https://example.com/image.jpeg', alt: 'Descriptive text for a screen reader'});
// The browser would use webp if it suppports it
player.poster({
  sources: [{
    srcset: 'https://example.com/image.webp',
    type: 'image/webp'
  },
  {
    srcset: 'https://example.com/image.jpeg',
    type: 'image/jpeg'
  }],
  img: 'https://example.com/image.jpeg'
});
// Where the fallback image is omited, the last source's image is used. This would be
// equivalent to the last example.
player.poster({
  sources: [{
    srcset: 'https://example.com/image.webp',
    type: 'image/webp'
  },
  {
    srcset: 'https://example.com/image.jpeg',
    type: 'image/jpeg'
  }]
});

To do

  • Tests
  • jsdoc/types

@gkatsev
Copy link
Member

gkatsev commented Dec 20, 2022

If sources are used, the poster attribute is not set on the tech, so the tech and poster do not load different images.

What about on iPhones? Might be worth special-casing it and still setting it in that case.

Additionally, if the PosterImage component is turned off, we should set poster on the tech.

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

Successfully merging this pull request may close these issues.

3 participants