In the past, plugins such as Adobe Flash were needed for displaying video and audio. However, HTML5 now has native support for both video and audio. Audio and video in HTML5 are now how image are supported. HTML5 specifies some Codecs which are supported for Audio and Video. A Codec is simply a compression algorithm for converting video and audio into smaller file as well as maintaining quality.
Video Codecs in HTML5
- Ogg Theora
Audio Codecs in HTML5
- Ogg Theora
To add a video, simply use <video> tag with the attributes
src holding the link to the video like
The tag can also take other attributes such as:
controls="controls"to add browser default controls
autoplay="autoplay"to autoplay the video
loop="loop"to loop the video
poster="path/to/picture"to display the specified picture while the video is loading
<audio> follows the same syntax as the
<video> tag with all attributes.
It is important to provide several sources for a multimedia file due to compatibility reasons. So, when defining the video or audio in HTML, instead of referencing only one file via a the
src attribute, it is better to provide several sources for the same file using the <source> tag. You can specify several sources for a video like this:
<source src="paddle-steamer.mp4" type="video/mp4"/>
<source src="paddle-steamer.webm" type="video/webm"/>
<p>Sorry, your browser doesn’t support the video element</p>
Advanced CSS Techniques
A Web browsers represent a HTML page as a DOM(Document Object Model). In the DOM, there are parent and children elements. If we take an HTML Table having 5 rows, we can refer to the Table as a parent element and the rows are the child elements of the Table.
CSS allows to reference child elements using Pseudo-class. Suppose a table contains 5 rows and we want to apply a style to the first row, we can use the :first-child.
Likewise, we can :last-child and nth-child(). The nth-child can take an argument. This argument is a formula that finally return an integer value. So,
tr:nth-child(1) returns the first table row and
tr:nth-child(even) applies for all even rows. The formula can also be in the form
an+b where a is a cycle size,n is a counter starting with 0 and b is an offset.