Multimedia & Advanced CSS Techniques

Multimedia

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
• mp4
• webm

Audio Codecs in HTML5

• Ogg Theora
• mp4
• mp3
• wav
• aac

To add a video, simply use <video> tag with the attributes src holding the link to the video like

<video src="path/to/videofile"></video>

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

The <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:

<video controls="controls">
  <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>
</video>

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.

tr:first-child{
color:red;
}

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.