Tutorials Tonight
Follow Us

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:

<video src="URL" height="value" width="value" controls>
  This text is used for browser which does not support video element.
</video>

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.

<video src="Night sky.mp4" height="225" width="400" controls>
  Your browser does not support video element.
</video>
▶ 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:

<video height="225" width="400" controls>
  <source src="Night sky.ogg" type="video/ogg">
  <source src="Night sky.mp4" type="video/mp4">
  Your browser doesn't support video element.
</video>
▶ 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".

<video height="225" width="400" preload="none" controls autoplay loop>
  <source src="Night sky.ogg" type="video/ogg">
  <source src="Night sky.mp4" type="video/mp4">
  Your browser doesn't support video element.
</video>
▶ Run the code

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


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.