- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we set an image to be shown while the video is downloading in HTML?
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.
- Related Articles
- How do we create an image map in HTML?
- How do we set the range that is considered to be of low value in HTML?
- How do we define an area in an image map with HTML?
- How do we set text font in HTML?
- How do we set the text direction for the content in an element in HTML?
- How do we set the type of element in HTML?
- How do we set the alignment according to surrounding elements in HTML?
- How to set the audio output of the video to mute in HTML?
- How do we set what value is the optimal value for the gauge in HTML?
- How do we include an anchor in HTML?
- How do we specify that the audio/video will start playing as soon as it is ready in HTML?
- How do we set what media/device the linked document is optimized for in HTML?
- How do we include an emphasized text in HTML?
- Set an image as a server-side image map in HTML?
- How do we include a section in an HTML document?
