Introduction: In this article, we are going to learn how to set a thumbnail image for an HTML5 video. Thumbnail is the image that is displayed as a preview of the video. Basically it is used to represent what the video contains or what it is related to. It is displayed until the time the video is started. By default, the first frame of the video is displayed as the initial preview for the video.
Approach: Sometimes the user wants to display a specific image of his choice as the thumbnail of the video. This can be simply done by using the poster attribute. All you have to do is create a poster attribute in the video tag and place the URL of the thumbnail image in it.
Syntax:
<video height="" width="" poster="URL of the image to be displayed">
Example:
<!DOCTYPE html>
<html>
<body>
<video width="400"
height="350"
controls poster=
<source src=
type="video/mp4">
</video>
</body>
</html>
|
Output:
Explanation: The poster attribute of the video tag contains the URL of the image that the user wants to set as the thumbnail of the video which is the image that will be visible until the user press the play button. The src attribute contains the URL of the video and the control attribute shows features like play/pause/seek/volume in the video.
For more information on HTML video tag please visit here