tutorialstonight logo
A Platform To Learn To Code

HTML5 VIDEO



HTML5 gives us power to embed video in any web page without using any plug-in.

Before HTML5 we needed to use plug-in like Flash to embed video in web pages.

Video can be added to a web page using <video> element.

Here is syntax of <video> element:

Example


Syntax explanation:

  • src attribute - This attribute is used to pass file location of the video.
  • height attribute - It is used to define height of the video.
  • width attribute - It is used to define width of the video.
  • control attribute - It is a boolean attribute.If it is mentioned then it creates controls like play/pause,mute etc for the video.
  • The text written in between the video tag is displayed only when your browser doesn't support the video element.

Example

Run the code

Video with multiple format

We can insert one or multiple formats of the same video file. The browser will choose the first one which it will be able to play.

Here is an example:

Example

Run the code

Few other attributes

In video element we have few other attributes like -

  • loop attribute - This is boolean attribute.This specifies that video will start playing again after it ends.
  • autoplay attribute - This specifies that video will start playing as soon as it is ready to play.
  • preload attribute - This attribute is used to control video loading to the web page.If we want to load video then value of attribute is "auto" else value is "none" and if we just want to load metadata then value is "metadata".

Example

Run the code

Output: (Video will not be loaded as preload value is none but will load when play button clicked)