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.
<video height="" width="" poster="URL of the image to be displayed">
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
- Nodejs | GM thumbnail() Function
- Convert an image into grayscale image using HTML/CSS
- How to specify an image as a server-side image-map in HTML ?
- How to insert a video link within an image file?
- How to hide “Image not found” icon when source image is not found?
- How to set the width and height of an image using HTML ?
- How to set caption for an image using HTML ?
- HTML | DOM Video seekable Property
- HTML | DOM Video loop Property
- HTML | DOM Video playbackRate Property
- HTML | DOM Video paused Property
- HTML | DOM Video preload Property
- HTML | DOM Video Object
- HTML | DOM Video audioTracks Property
- HTML | DOM Video buffered Property
- HTML | DOM Video autoplay Property
- HTML | DOM Video currentSrc Property
- HTML | DOM Video controls Property
- HTML | DOM Video currentTime Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.