Multimedia term refers to multiple media formats, and online multimedia thus refers to all that information presented in different media formats we are so used to watch, listen or download from Internet websites. Multimedia on the web includes all pictures, sounds, videos or animations streaming from the world if Internet to our homes and offices (cars, planes, and so on nowadays).

The goal of HTML5 multimedia integration techniques is to provide tools for web developers to include multimedia formatted information to their projects without needing a third party supports (i.e. Flash comes to mind). As the need for streaming videos and music arises, the need for better web integration follows as well.

Multimedia in HTML5 provides many benefits, main of which are listed here:

  • Plugins are no longer required
  • Speed - anything naturally integrated to a browser will be rendered and executed in a faster fashion than imported third-party
  • Native (built-in) controls are provided by the browser
  • Accessibilities (keyboard, mouse) are built in automatically

Media formats generally

Media formats (or elements) such as sounds or videos are stored within the media files, most precisely they may be seen as the file's extension. Browsers, for instance, will treat .html and .htm file extensions as an HTML file; however the latter one ('.htm') is old way of using it and it may become obsolete. Following that same patter, the .xml extension means an XML file, .css a CSS file, and so on.

Some of the most common multimedia file extensions are .gif, png, and .jpg (.jpeg) for pictures, .wav, mp3, and .mp4 for sound, .wmv and .avi for videos, and .swf for Flash movies, etc?

Common HTML 5 video formats

There are many video formats nowadays around Internet, but at this moment only 3 are recognized by the HTML5. These are:

  1. MP4 - MP4 or MPEG-4 is a compressed video format (similar to MP3 for audio (see below)). It was designed by the Moving Picture Experts Group, originally developed to provide a DVD quality (so to speak) of compressed video and audio information. This MP4 file format is divided into 17 different profiles each of which with different characteristics, and thus more or less suitable for HTML5. Profiles named 'Baseline' and 'Main' are used for HTML5 MP4 video with the MIME type video/mpeg and the attribute type video/mp4.
  2. WEBM - WebM is a compressed format based on the project (www.webmproject.org) developed and supported by web-industry leaders, such as Mozilla, Opera, Adobe, and Google. The video content is compressed with the VP8 codec, which was developed by On2 Technologies (acquired by Google). WebM format uses the MIME type video/webm and the attribute type video/webm.
  3. Ogg - Theora Ogg is an opened container format designed and maintained by the Xiph.Org Foundation. According to the developers of the Ogg format this is a very sufficient streaming format and it allows high quality multimedia data manipulation.

Common HTML5 audio formats

There are many audio formats nowadays around Internet, but at this moment only 3 are recognized by the HTML5. These are:

  1. MP3 - MP3 (also known as MPEG-1 and MPEG-2 Audio Layer III) is a compressed audio format that does not specify how to encode MP3, but rather specifies how to decode it. This resulted in creation of many different MP3 encoders, each of which produces audio files of different sound quality. Same as MP4, it was developed by the Moving Picture Expert Group. The MP3 audio uses the MIME type audio/mpeg and the attribute type audio/mp3 (codec).
  2. WAV - WAV file format's (Waveform Audio File Format) is an audio format that was first created by Microsoft and IBM in 1991. This format may render large files because it actually does not have to contain compressed data. The WAV audio files use the MIME type audio/wav and the attribute type audio/wav (codec).
  3. Ogg - Ogg audio format is designed and maintained by the Xiph.Org Foundation. According to the developers of the Ogg format this is a very sufficient streaming format and it allows high quality multimedia data manipulation.

 

›› go to examples ››