• ☆ open standards
• ☆ transparency
• ☆ better page integration
• ☆ better integration with other elements

• ☆ Chrome 10 +
• ☆ Firefox 3.6 +
• ☆ Internet Explorer 9
• ☆ Opera 10 +
• ☆ Safari 5 +

For non-supporting browsers you can use a fallback or polyfill.

Simplest possible fallback :

					<audio src="media/Bubble.ogg" controls>
						<a href="media/Bubble.ogg">grab Bubble</a> 
					</audio>
				

Video example :

					<video width="480" height="270" 
					src="media/Big_Buck_Bunny_Trailer.ogv" 
					preload controls poster="images/elvis.png">
					</video>

• ☆ src - url of media
• ☆ autoplay
• ☆ loop
• ☆ controls - display the controls
• ☆ muted
• ☆ preload |none|metadata|auto|
• ☆ type
• ☆ height / width (video only)

• ☆ currentTime
• ☆ volume
• ☆ muted
• ☆ duration

• ☆ play
• ☆ pause
• ☆ ended
• ☆ progress
• ☆ timeupdate

Safari relies on Quicktime to handle media. This means that if Quicktime isn't installed (Windows), Safari won't play web based audio/video.

Also, issues exist that mean audio will intermittently fail to play in Snow Leopard 10.6.3 through 10.6.7. Windows Safari remains unaffected.

happyworm.com/blog/2010/08/17/safari-requires-quicktime-for-html5-based-media/

isflashdeadyet.com/tests/safari-html5/

• ☆ HTML5Test html5test.com
• ☆ caniuse caniuse.com
• ☆ Modernizr modernizr.com
• ☆ jPlayer jplayer.org/HTML5.Audio.Support

.htaccess examples

• ☆ AddType video/ogg .ogv
• ☆ AddType video/mp4 .mp4
• ☆ AddType video/webm .webm
• ☆ AddType video/mp4 .m4v

Audio

• ☆ OGA : Vorbis audio
• ☆ MP4 : AAC

Video

• ☆ WebM : VP8 video and Vorbis audio
• ☆ OGV : Theora video and Vorbis audio
• ☆ MP4 : H.264 and AAC

Better results with Constant Bitrate. 44.1kHZ works well.

Tools :

• ☆ Audacity audacity.sourceforge.net
• ☆ Miro getmiro.com
• ☆ Firefogg firefogg.org
• ☆ FFmpeg2theora v2v.cc/~j/ffmpeg2theora
• ☆ Handbrake handbrake.fr
• ☆ Vid.ly vid.ly
• ☆ Archive.org Archive.org

Only shoutcast and icecast servers supported just now.

Issues with older (HTML5) browsers esp on Linux.

MP3 streams seem to work better. M4A (AAC) have problems.

trygve-lie.com/blog/entry/html_5_audio_element_and

Autobuffer replaced by preload.

Preloading not supported in all older HTML5 browers (Opera 10/Firefox 3.6).

Buffered not always supported (Opera, PlayBook).

Not all HTML5 browsers allow byte-range seeking. Safari (Windows). You can still seek within the downloaded content, it downloads from the start until the end, (as does Flash).

Firefox 4 does not always give the final progress event when buffered == 100%.

When dealing with timeranges figuring out the % loaded can be difficult.

In general, due to incomplete implementations/specifications (at the time) it is difficult to create a loading progress bar that works on all browsers.

Not easy. May not produce satisfactory results.

Issues :

• ☆ looping is not reliable on all browsers
• ☆ latency can be an issue
• ☆ some browsers deal with small clips badly

Possible solution : audio sprites

remysharp.com/2010/12/23/audio-sprites/

Flash Free Audio (Opera Blog)

What and how can we detect support for audio/video, codecs and methods ?

canPlayType method returns probably, maybe or empty string. (It won't return "yes" - a MIME type alone isn't enough for the browser to say.)

Example 1 - detecting support for the media element

		var myAudio = document.createElement('audio');
		alert(!!myAudio.canPlayType); // true or false

Warning canPlayType used to return "no". Older browsers that haven't been updated may still return "no".

Mobile browsers can act differently because devices have :

• ☆ metered internet bandwith
• ☆ limited cpu, memory and power (battery)
• ☆ prioritised hardware controls

Watch Out!

• ☞ autoplay will often not work
• ☞ volume changes through web api may have no affect
• ☞ cannot play more than one file simultaneously
• ☞ video media may be forced into a different window*

*tablets tend to play in page, while phones will play video full screen. This full screen player cannot be closed without user interaction.

Android 2.2 <video> only.

Android 2.3 <video> and <audio>.

Android also requires metadata to load before playing (otherwise you need to reset src).

Firefox 4 + : Audio Data API
wiki.mozilla.org/Audio_Data_API

Chrome 10 + : Web Audio API
chromium.googlecode.com/svn/trunk/samples/audio/

Advanced APIs let you react to and manipulate the audio data.

But they have different APIs, as a standard has yet to be established.

However libraries like audiolib.js github.com/jussi-kalliokoski provide a common API.

WebRTC - Real-time Audio and Video Communication.
sites.google.com/site/webrtc/

Device API - Access to microphone and camera. APIs
w3.org/2009/dap/

Audio API Enhancement and Standardisation -
w3.org/2011/audio/

Media Fragments - Download and link to fragments of media
w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/

Media Annotations - Add related data to media
w3.org/2008/01/media-annotations-wg.html

WebVTT - Mark up external text track resources
whatwg.org/specs/web-apps/current-work/webvtt.html

A lot of different audio and video libraries out there.

Some free, some less free.

jPlayer jPlayer.org is completely free (GPL/MIT), has a large community and is regularly maintained.

It allows you to make both audio and video players that look the same in every browser.

An interesting library that we've had fun using is Popcorn.js. popcornjs.org Popcorn allows you to trigger events at certain points in the media.

• ☆ Native Audio in the Browser
  html5doctor.com/native-audio-in-the-browser/
• ☆ Everything you need to know about HTML5 video and audio
  dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
• ☆ Video on the Web
  diveintohtml5.org/video.html
• ☆ “Probably, Maybe, No”: The State of HTML5 Audio
  24ways.org/2010/the-state-of-html5-audio
• ☆ The State of HTML5 Audio
  phoboslab.org/log/2011/03/the-state-of-html5-audio

@maboa - jPlayer.org

happyworm.com/blog