How to use Video in HTML5
In this article I have described about HTML5 video with an example.
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