- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <video> Tag
HTML <video> tag is used to embed video media player into the website. For proper rendering, you should offer a variety of video formats since not all browsers support the same ones. Within the <source> tag, or src attribute the path of the video file is nested. If the browser does not support the video format, you can alternatively supply an alternative text in the <video> tag, which will be shown instead.
Theere three video formats that are supported by the <video> element are MP4/MPEG 4, WebM, and Ogg.
Syntax
<video src="..." controls></video>
Attribute
HTML video tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
autoplay | autoplay | Specifies that the video will play automatically. |
controls | controls | Specifies that the video controls gets displayed. |
height | pixels | Specifies the height of the video media player. |
loop | loop | Specifies that the video will start again every time after finish. |
muted | muted | Specifies that the audio should be muted. |
poster | URL | Specifies the image to be shown while the video is downloading. |
preload | auto metadata none |
Specifies what author thinks will lead to user experience at its best. |
src | URL | Specifies the URL of the video's path. |
width | pixels | Specifies the width of the video media player. |
Examples of HTML video Tag
Bellow examples will illustrate the usage of video tag. Where, when and how to use it to render video player and how we can manipulate video player using CSS.
Creating Video player using Video Tag
Let’s look at the following example, where we are going to use the preload attribute value set to "auto," which loads the entire video when the page loads.
<!DOCTYPE html> <html> <body> <center> <video width="400" height="200" controls preload="auto"> <source src= "https://cdn.pixabay.com/vimeo/165221419/ipad-2988.mp4?width=640&hash=4816e81143efa7f31f1e8c86c5605f43fdfac941" type="video/mp4"> </video> </center> </body> </html>
Video player with Control Elements
Following is an example where we are going to use the controls attribute, which is used to add controls like play, pause, volume, etc.
<!DOCTYPE html> <html> <body> <center> <video width="420" height="250" controls> <source src= "https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4"> </video> </center> </body> </html>
Autoplay video after page load
In the following example, we are going to use the autoplay attribute to make the video start automatically.
<!DOCTYPE html> <html> <body style="background-color:#ABEBC6"> <center> <video width="420" height="250" autoplay> <source src= "https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4"> </video> </center> </body> </html>
Video player with Play & Pause Button
Considering the following example, where we are running the script and adding events like play/pause, big screen, and small screen.
<!DOCTYPE html> <html> <body style="background-color:#EAFAF1"> <div style="text-align:center"> <button onclick="Pauseplay()">PLAY/PAUSE</button> <button onclick="BScreen()">BIG SCREEN</button> <button onclick="SScreen()">SMALL SCREEN</button> <br> <video id="tutorial" width="400"> <source src= "https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4"> </video> </div> <script> var testvideo = document.getElementById("tutorial"); function Pauseplay() { if (testvideo.paused) testvideo.play(); else testvideo.pause(); } function BScreen() { testvideo.width = 500; } function SScreen() { testvideo.width = 200; } </script> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
video | Yes 4.0 | Yes 9.0 | Yes 3.5 | Yes 3.1 | Yes 11.5 |
To Continue Learning Please Login
Login with Google