How to use Video in HTML5

In this article I have described about HTML5 video with an example.
  • 2106

Video on web

  • Today most of the modern websites show videos and we know that HTML5 is containing much better support for media like video and audio tags.
  • HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page with the help of <video> element .
  • The various Flash-based media players, which generally allow users to play, pause, stop, seek, and adjust volume can be achieved.
  • Video and audio on the web has become more popular via the use some sites like YouTube, Viddler, Revver, MySpace, thats make easy for anyone to publish video and audio easily and confidentially.

HTML video - How it work

The simplest way to embed a video is to use a video element and allow the browser to provide a default user interface.

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
   <a href="video.ogv">Download movie</a>
</video>

The controls attribute is a boolean attribute that indicates whether or not the author wants this UI on or off by default. as in example

<video width="320" height="240" controls="controls">
   <source src="movie.ogg" type="video/ogg" />
   <source src="movie.webM" type="video/webM" />
</video>

Note : It is noted that height and breath attribute should always be set because If height and width are set , the space required for the video is reserved when the page is loaded. HTML 5 provides the source element for specifying alternative video and audio.

HTML video tag

  • The <video> tag makes it easier to embed video clips into your web pages.
  •  It has following attributes are as src (naturally), autoplay,loop.
  • The <video> tag  can contain additional markup describing the video, ideally, the full transcript of the video.
  • The video tag  description

<video>       Defines a video or movie
<source>     Defines multiple media resources for media elements, such as <video> and <audio>
<track>        Defines text tracks in media players

Browser support

Following are the browser which supports the html 5

  • Internet Explorer 9
  • Firefox
  • Opera
  • Chrome
  • Safari support the <video>

Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.