Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Image While 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.
332 Views
