Option to make player as main content (eager/prioritized loading)

[kontrollanten]

Description

Currently the poster image is marked as loading="lazy", which isn't desirable all the times. In cases where the video is the main content of the page it should be marked as loading="eager" and fetchpriority="high" to make a good user experience and SEO.

#8038

Reduced test case

https://legacy.videojs.org/

Steps to reproduce

1. Go to https://legacy.videojs.org/
2. Check the loading property of the posters img element.

Errors

No response

What version of Video.js are you using?

8.23.4

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Brave 1.89.137 Chromium: 147.0.7727.102

What OS(es) and version(s) does this occur with?

Ubuntu 22

[phloxic]

Per https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading eager is the default. But, yes, the lazy attribute which is always added in VideoJS 8 should be optional.

[kontrollanten]

What about an option named maincontent which will sett loading to eager and fetchpriority to high?

[phloxic]

Sure, I just wanted to emphasize that it should be an option.

But the poster component itself is an unfinished project so far: The img sits in a picture, but afaict the capabilities of picture are never used. I found a way of hacking that, which, as a side effect, also allows me to set img attributes, like fetchpriority, see: #8947

Not sure whether features like this will be integrated in VideoJs 8 anymore, I looks like all efforts go already into v10 which seems, for better or worse, a completely different beast.

[kontrollanten]

Thanks! I created a PR to implement this. Since it has small technical impact and big UX/SEO impact I hope it'll be welcome already in v8. You're welcome to review and test #9173