Simple example of how to actually use picture tag features for poster

[phloxic]

Video.js v8.x puts the poster image in a picture tag inside the PosterImage component. So far, however, the poster option, nevermind the poster attribute, only allows for a string containing a specific URL, and then the picture tag contains only a 'standard' img tag.

This is a sketch of how to use picture tag capabilities for the Video.js poster. It is self-contained, i.e., no additional scripts to determine the image type. So it can be extended with other picture features by simply tweaking the tag's content.

At page load, the picture is a child of the video[-js] tag. Use of JavaScript is limited to moving the picture into the PosterImage component and then showing the 'PosterImage' component. Setting poster() using the picture's img tag's currentSrc is possible, but then picture capabilities like dynamic image selection are lost.

<h1>Video.js Picture Poster</h1>

<h2>video-js custom tag with video source</h2>

<video-js controls id="customtag" class="video-js vjs-4-3">
  <source type="application/x-mpegurl" src="https://example.com/video1.m3u8">
  <picture class="vjs-poster">
    <source type="image/avif" srcset="https://example.com/poster1.avif">
    <source type="image/webp" srcset="https://example.com/poster1.webp">
    <img src="https://example.com/poster1.jpg" 
         fetchpriority="high" width="1280" height="960">
  </picture>
</video-js>

<h2>Video tag without video source</h2>

<video controls id="loadsmedia" class="video-js vjs-16-9">
  <picture class="vjs-poster">
    <source type="image/avif" srcset="https://example.com/poster2.avif">
    <source type="image/webp" srcset="https://example.com/poster2.webp">
    <img src= "https://example.com/poster2.jpg" width="1280" height="720">
  </picture>
</video>

<script>
  const loadPoster = player => {
    // move picture from inside video tag into poster component
    const posterComponent = player.getChild('PosterImage');
    const posterSelector = 'picture.vjs-poster';

    videojs.dom.appendContent(
      posterComponent.el(), player.tech(0).$(posterSelector)
    );
    posterComponent.show();

    player.on('loadeddata', () => {
      player.log(
        'poster img currentSrc:', posterComponent.$(`${posterSelector}>img`).currentSrc
      );
    });
  };

  const player1 = videojs('customtag', {
    // further configuration goes here
  }, () => {
    loadPoster(player1);
  });

  const player2 = videojs('loadsmedia', {
    // further configuration goes here
  }, () => {
    loadPoster(player2);
    // load video after poster
    player2.src([{
      src: 'https://example.com/video2.m3u8',
      type: 'application/x-mpegurl'
    }]);
  });
</script>