How to display a poster image before an HTML5 video plays?

Use the poster attribute to display poster images before HTML5 video playback, by adding poster="path/to/poster-image.jpg" to the

To display a poster image before an HTML5 video plays, use the poster attribute in the <video></video> tag. This image will show up as a preview until the user clicks play or the video starts loading, depending on the browser and settings.

Use the poster Attribute

Add the poster attribute to your <video></video> element and set its value to the URL of the image you want to display:

 <video controls poster="path/to/poster-image.jpg">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

This is the simplest and most widely supported method. The image should be visually representative of the video content and sized appropriately to match the video dimensions to avoid stretching.

Make Sure the Image Loads Properly

• Use a fully qualified path or correct relative path to the image.
• Choose a high-quality but optimized image — it should look good but not slow down page loading.
• Common formats: JPEG, PNG, or WebP (ensure browser compatibility).

Additional Tips

• If the poster attribute is missing or the image fails to load, the first frame of the video may be shown instead (if the browser supports it), or nothing will appear until the video loads.
• The poster image does not display once the video starts playing. It automatically disappears when playback begins.
• You can style the video element with CSS to ensure the poster image displays correctly:

 video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

Optional: Fallback with JavaScript (for dynamic cases)

If you need more control — for example, showing a custom overlay or handling dynamic posters — you can manage it with JavaScript and CSS:

 <div class="video-container" style="position: relative;">
  <img src="/static/imghw/default1.png"  data-src="poster-image.jpg"  class="lazy" alt="Video preview" id="poster"   style="max-width:90%">
  <video id="myVideo" style="display: none;">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

Then use JavaScript to swap on play:

 const video = document.getElementById('myVideo');
const poster = document.getElementById('poster');

video.addEventListener('play', () => {
  poster.style.display = 'none';
  video.style.display = 'block';
});

But for most cases, just using the poster attribute is sufficient and standard.

Basically, use poster="image.jpg" — it's built into HTML5 for this exact purpose.

The above is the detailed content of How to display a poster image before an HTML5 video plays?. For more information, please follow other related articles on the PHP Chinese website!