How do we set an image to be shown while the video is downloading in HTML?

HTML Web Development Front End Technology

In this article we are going to learn about how do we set an image to be shown while the video is downloading in HTML.

The HTML <video>poster attribute allows the user to display the image when the user clicks the play button or downloads a video. Otherwise, the first frame of the video will be used as the poster image if the poster attribute was not set.

Syntax

Following is the syntax for HTML <poster> attribute.

<video poster="URL">

Let’s dive into the following example where you can understand more about HTML <poster> attribute.

Example 1

In the following example we are using the <video> element and poster attribute.

<!DOCTYPE html>
<html>
<body>
   <center>
      <video width="340" height="220" controls poster="https://www.tutorialspoint.com/static/images/logo-color.png">
      <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
      </video>
   </center>
</body>
</html>

On executing the above script, it will generate an output consisting of the video uploaded along with an image added as a poster to the video using <video> poster attribute.

Example 2

Considering the following example where we are using the two video one is with <poster> attribute.

<!DOCTYPE html>
<html>
<body>
   <center>
   <video width="340" height="220" controls poster="https://www.tutorialspoint.com/images/logo.png">
      <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4">
   </video>
   <video width="320" height="240" controls>
      <source src="https://samplelib.com/lib/preview/mp4/sample-30s.mp4">
   </video>
   </center>
</body>
</html>

When the script gets executed, it will generate an output consisting of two videos uploaded to the webpage, where one is added with the HTML <poster> attribute and another is normal.