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 setting poster by reading the currentSrc picked by the browser.

<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/vnd.apple.mpegurl" src="https://example.com/video1.m3u8">
  <picture>
    <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" width="1280" height="960" alt="Video1 poster">
  </picture>
</video-js>

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

<video controls id="loadsmedia" class="video-js vjs-16-9">
  <picture>
    <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" alt="Video2 poster">
  </picture>
</video>

<script>
  const getPoster = player => {
    const posterComponent = player.getChild('PosterImage')
    // move picture from inside video tag into poster component
    videojs.dom.appendContent(posterComponent.el(), player.tech(0).$('picture'))
    // return img src picked by browser
    return posterComponent.$('picture>img').currentSrc
  }

  const player1 = videojs('customtag', {
    // further configuration goes here
  }, () => {
    const posterCurrentSrc = getPoster(player1)
    player1.poster(posterCurrentSrc)

    player1.log('poster:', player1.poster())
  })

  const player2 = videojs('loadsmedia', {
    // further configuration goes here
  }, () => {
    player2.loadMedia({
      poster: getPoster(player2),
      src: {
        type: 'application/vnd.apple.mpegurl',
        src: 'https://d2b3xtj80vdo5b.cloudfront.net/lshtrailer.m3u8'
      }
    })

    player2.log('poster:', player2.poster())
  })
</script>