HTML MULTIMEDIA CHAPTER 26

26TH TUTORIAL ON HTML MULTIMEDIA 


 

HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

 

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

 

Browser Support

The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors, fonts, images, and multimedia!

 

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

 

Common Video Formats

There are many video formats out there.

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.

 

Format

File

Description

MPEG

.mpg
.mpeg

MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML.

AVI

.avi

AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.

WMV

.wmv

WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.

QuickTime

.mov

QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers.

RealVideo

.rm
.ram

RealVideo. Developed by Real Media to allow video streaming with low bandwidths. Does not play in web browsers.

Flash

.swf
.flv

Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.

Ogg

.ogg

Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

WebM

.webm

WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML.

MPEG-4
or MP4

.mp4

MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and TV hardware. Supported by all browsers and  recommended by YouTube. 


Only MP4, WebM, and Ogg video are supported by the HTML standard.

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Format

File

Description

MIDI

.mid
.midi

MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by   electronics. Plays well on all computers and music hardware, but not in web browsers.

RealAudio

.rm
.ram

RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers.

WMA

.wma

WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers.

AAC

.aac

AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.

WAV

.wav

WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML.

Ogg

.ogg

Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

MP3

.mp3

MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.

MP4

.mp4

MP4 is a video format, but can also be used for audio. Supported by all browsers.

 Only MP3, WAV, and Ogg audio are supported by the HTML standard.


FILE DOWNLOADING LINK BELOW


Comments

Post a Comment

Popular posts from this blog

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">
Read more

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS
Read more

HTML 5 BASIC TAG CHAPTER 3

Image
3 RD TUTORIAL ON HTML 5 BASICS TAGS           HTML Documents Tag All HTML documents must start with a document type declaration:  <!DOCTYPE html> . The HTML document itself begins with  <html>  and ends with  </html> . The visible part of the HTML document is between  <body>  and  </body> . HTML Headings Tags HTML headings are defined with the  <h1>  to  <h6>  tags. <h1>  defines the most important heading.  <h6>  defines the least important heading EXAMPLE <!DOCTYPE html> <html> <head><title>demo</title></head> <body>                 <h1>This is heading 1</h1>                 <h2>This is heading 2</h2>                 <h3>This is heading 3</h3>                 <h4>This is heading 4</h4>                 <h5>This is heading 5</h5>                  <h6>This is heading 6</h6
Read more