add support for marking player as maincontent

When maincontent is set to true the poster img element will get
loading=eager and fetchpriority=high to decrease LCP time.

closes #9171

Author: kontrollanten

src/js/poster-image.js

@@ -27,6 +27,10 @@ class PosterImage extends ClickableComponent {
   constructor(player, options) {
     super(player, options);
 
+    const { maincontent } = (options && options.playerOptions) || {};
+
+    this.isMainContent = maincontent;
+
     this.update();
 
     this.update_ = (e) => this.update(e);
@@ -138,7 +142,8 @@ class PosterImage extends ClickableComponent {
         },
         {},
         Dom.createEl('img', {
-          loading: 'lazy',
+          loading: this.isMainContent ? 'eager' : 'lazy',
+          fetchPriority: this.isMainContent ? 'high' : 'auto',
           crossOrigin: this.crossOrigin()
         }, {
           alt: ''

test/unit/poster.test.js

@@ -31,6 +31,15 @@ QUnit.test('should create and update a poster image', function(assert) {
   posterImage.dispose();
 });
 
+QUnit.test('should mark img as prioritized request when maincontent is true', function(assert) {
+  const posterImage = new PosterImage(this.mockPlayer, { playerOptions: { maincontent: true } });
+
+  assert.equal(posterImage.$('img').loading, 'eager', 'img is loading eager');
+  assert.equal(posterImage.$('img').fetchPriority, 'high', 'img has fetchpriority high');
+
+  posterImage.dispose();
+});
+
 QUnit.test('should mirror crossOrigin', function(assert) {
   assert.strictEqual(this.mockPlayer.posterImage.$('img').crossOrigin, null, 'crossOrigin not set when not present in options');
   assert.strictEqual(this.mockPlayer.posterImage.crossOrigin(), null, 'crossOrigin not set from getter when not present in options');