title: Does the html5 video 'poster' attribute block video load?
body: <p>I am working on a Hero banner for a website that should display a 'poster' image until a video is loaded. The video element is set to 'autoplay'. Both the 'poster' image and video are served from S3.</p>
  <p>After some page-load analysis it seems there are occasions where the video loading is waiting for the 'poster' image to load.
  For instances where the video has loaded before the 'poster' image, is there a way to simply start the video?</p>
  <p>The code is:</p>
  <pre><code>&lt;video src={'video_url'}
        poster={'poster_url'}
        autoplay
        loop
        muted 
        controlsList='nodownload'&gt;
  &lt;/video&gt;
  </code></pre>
  <p>additionally, the document  is preloading the 'poster' image ( slim templating shown )</p>
  <pre><code>link rel=&quot;preload&quot; as=&quot;image&quot; href={'poster_url'}
  </code></pre>
  <p>I would like to not use JS for this specific implementation. In general the implementation is quite performant but it seems the data has a high standard deviation - when the page loads fast it loads fast; when it loads slow it loads quite slow.</p>
  <p>It is not explicit in the documentation if the 'poster' image will ever block the video loading. However, the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" rel="nofollow noreferrer">MDN  docs</a> are quite informative.</p>
  <p>Is there a way to guarantee the 'poster' and 'video' will display in the &quot;fastest way&quot; possible?</p>
  <p>Edit: clarity</p>