Html video | html video tag ,add video using html - codewithrandom

CodingPorium 0 Comments

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


There are many media types such as audio, image, and video that give more specification and details to a website. Today we are going to see how a video media type is added to a website and how it can be customized using various attributes and how it can be styled using various CSS attributes too.

<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: HTML video controls

  • 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 :

<video height=”500” width=”500” controls>
  <source src=”movie.mp4” type=”video/Mp4”>
  <progress id=”progress” min=”10”<</progress>
</video>

 

 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:

Progress {
  width: 40px;
  height:40px;
  border: dotted;
  color: #6493f;
}

And many more………

You can also style the control buttons by using the button tag and styling it by using various CSS attributes.


written by @codingporium

Thanks for reading! Do contact me via the methods below if you have to say anything:
Tags

Post a Comment

Post a Comment

Previous Post Next Post