Understanding Audio Quality

When referring to audio quality, bitrate is a measurement of bits per second that audio distributes. The sound quality will improve as the bitrate improves. For example, MP3 files with a bitrate of 128 kbps are more likely to sound better than MP3 files with a bitrate of 64 kbps.

Digital audio has a sample rate, bit depth and bit rate. They are usually compressed to reduce file size and stream more efficiently over networks. Compression can be lossy or lossless.

1. sample rate - the number of audio samples captured every second. Telephone networks and VOIP services can use a sample rate as low as 8 kHz.  
2. bit depth - the number of bits available for each sample. The bit depth may be 8-bit, 16-bit, 24-bit, 32-bit. The higher the bit depth, the higher the quality of the audio. Bit depth is usually 16 bits on a CD and 24 bits on a DVD. 
3. bit rate - the number of bits encoded per second of audio, or the number of bits transmitted or received per second. Bit rates are usually measured in kilobits per second (kbps).

Bit rate calculation
bit rate = bit depth * sample rate * number of channels

File size calculation
http://www.audiomountain.com/tech/audio-file-size.html

Uncompressed - Lossless (Audio CD, PCM WAV, AIFF)
Lossless are the highest quality files you can get and come mainly in the form of WAV (Microsoft), AIFF (Apple) & FLAC.  These files start off at the equivalent quality of a CD with a bitrate of 1411 kbps and a sample rate of 16bit but can go all the way up to 24bit / 192Khz. A WAV for example can be approximately 3.5 times bigger than a 320kbps MP3.

FLAC and ALAC are open source lossless compression formats.

Compressed - Lossy (mp3, m4a, aac, wma, ogg)
Compressed files come in varying quality rates and formats of which MP3 & M4A are the most popular. The bit rate for compressed files can go from 8 kbps up to 320 kbps.

Ogg Vorbis is an open source alternative for lossy compression.

Html5 Video and Audio

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

1. MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.
2. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.
3. Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

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

1. 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.
2. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5.
3. Developed by the Xiph.Org Foundation. Supported by HTML5.

For cross browser support, suggest to use MP4 video and MP3 audio.

Video

A video file usually contains video track, audio tracks. Individual track can have meta data (video aspect ratio, audio language etc), and containers can also have metadata (video title, poster, episode numbers etc)

Video container formats define how to store things, not what kind of data is stored. There are lost of video container formats, some most popular formats are MPEG-4 (.mp4, m4v), Ogg (.ogv, Ogg Theora), WebM (.webm), Flash Video (.flv), Audio Video Interleave (.avi).

When we watch a video, video player (e.g. VLC) usually does several things at once:

1. Interpret the container format to find out video and audio tracks, and how they are stored within the file for decoding process
2. Decode the video stream and display a series of images (frames) on the screen
3. Decode the audio stream and send the sound to speakers

Video codec (a combination of words coder and decoder) is an algorithm to encode video stream. Video player decodes the video stream according to video codec. There are lossy and lossless video codecs. There are many video codecs (like video containers), and most popular are H.264 (patent encumbered), Theora (royalty-free and not patent-encumbered), and VP8 (royalty-free not encumbered by any patents).

As to audio codecs, MP3 (patent encumbered), AAC (Advanced Audio Coding, patent-encumbered) and Vorbis (not patent encumbered) are most popular for Web audio.

Tools:
Firefogg for encoding Ogg video, ffmpeg2theora for batch encoding Ogg videos
HandBrake for encoding H.264 video
ffmpeg for encoding WebM video
LAME project is the free encoder for MP3
FAAC library is the open source (mencoder and ffmpeg)
OggConvert, ffmpege, aoTuV and libvorbis (QuickTime component on Mac, DirectShow filter on Windows)

Select HTML5 Video/Audio Player

There are many HTML5 Video and audio players which support native HTML5 audio/video tags with flash/silverlight fallback to support non-modern browsers. Selecting appropriate player among a big list needs more research effort, so finding the right one for your web application depends on your web app requirement and design. Even your web app doesn't need support non-modern browsers, I still suggest to use one HTML5 media player because different browsers support different video/audio codecs.

Web app requirement and design usually include the following points:
1. Do you want a unified UI/API for native HTML5 and flash fallback?
2. Do you need this on iOS (or other mobile browsers)?
3. Do you need the skinnable player?
4. Do you need the player support both video and audio?
5. What kind of license do you accept?

Among the big list and google results, I finally referenced the below 3 links to narrow down my choices
http://praegnanz.de/html5video/
http://html5video.org/wiki/HTML5_Player_Comparison
http://websitesmaderight.com/2011/05/45-html5-media-players-tutorials-and-resources/ 

For Video
video.js (LGPLv3)
SublimeVideo (Service/licensed)
JW Player (Custom)
flowplayer (GPLv3/Commercial)

For Audio
audio.js (MIT)
SoundManager (BSD)

For both Video and Audio
mediaelement.js (GPLv2 & MIT)
jplayer.js (GPL/MIT))
pickle player (licensed/purchase)
jMediaelement(GPL/MIT)
html5media.info (CC BY-NC-ND 3.0)

I want to find a player to support both Video and Audio, license free, working on iOS and with different themes for visual happiness. From above shorter list, I probably go with mediaelement.js (Paul Irish also recommends this player).