Html video | html video tag ,add video
using html - codewithrandom
Introduction
In this blog, we are going to learn about including video to your webpage and styling it using CSS
<video> tag is used to embed video content to your webpage, it was introduced in HTML5. Before <video> tag was introduced <embed> tag was used to insert audio or video file to your webpage but <video> tag has made it simple and saved the efforts.
It is a Start and Ends tag and so the content and attributes for uploading a video will be placed between the opening and ending tag
HTML video embed
SYNTAX :
<video src="movie.mp4"></video>
Attributes used for the video tag:
- Src : Specifies the URL of the video
- Control: You can add control options like play, pause and volume adjustments by using the control attribute.
- Autoplay: you can make the video play without waiting for user to press the play button. When the video is loaded and ready , it will automatically start paying.
- Loop: you can make the video play again and again after ending by using this attribute.
- Width: You can adjust the width of the video and decide how much area the video is going to cover horizontally.
- Height: you can adjust the height of the video and decide how much area the video is going to cover vertically.
- Muted: you can mute the audio accompanying the video by using this attribute.
EXAMPLE :
Example video output:
It supports video formats such as MP4, WebM, and OGG.
As video tag was introduced in HTML5, therefore, various latest browser versions such as Chrome 4.0, Edge 9.0, Firefox 3.5, Safari 3.1, Opera 11.5 supports video-tag
Styling video tag using CSS
You can style the way you control buttons look, you can style and control the margin , background colour and also other components using CSS to your video tag .
You can style different components of a video tag such as you can style the progress bar such as:
And many more………
You can also style the control buttons by using the button tag and styling it by using various CSS attributes.
Post a Comment