- ☆ open standards
- ☆ transparency
- ☆ better page integration
- ☆ better integration with other elements
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>
|FireFox 3.6 +||✓||✓|
|Safari 5 +||✓||✓||✓|
|Chrome 6 +||✓||✓||✓||✓*9 +|
|Opera 10.5 +||✓||✓|
|Internet Explorer 9||✓||✓||✓|
|Android 2.3 +||✓||✓||✓||✓|
<audio controls> <source src="elvis.mp3" type='audio/mpeg; codecs="mp3" ' > <source src="elvis.oga" type='audio/ogg; codecs="vorbis" ' > </audio>
Note : jsmad.org is an mp3 decoder in JS for Firefox4 + & Chrome10 +
|Browser||Theora Vorbis Ogg||H.264 AAC MP4||WebM|
|FireFox||3.5 +||4 +|
|Chrome||5.0 +||6.0 +|
|Opera||10.5 +||10.6 +|
|Internet Explorer||9.0 +||9.0 +VP8 codec|
|Android||2.0 +||2.3 +|
<video width="320" height="240" controls>
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.
Better results with Constant Bitrate. 44.1kHZ works well.
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.
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.
Possible solution : audio sprites
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".
Example 2 - detecting codec (more specific = better)
var myAudio = document.createElement('audio'); alert(myAudio.canPlayType('audio/mp3')); //ok alert(myAudio.canPlayType('audio/mpeg; codecs="mp3"')); // better
Example 3 - detecting buffered property
alert(myAudio.buffered === "object");
Warning Opera has a media.buffered object, but it does nothing. myAudio.buffered.length > 0 helps detect actual use.
Mobile browsers can act differently because devices have :
*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
Chrome 10 + : Web Audio API
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.
Device API - Access to microphone and camera. APIs
Audio API Enhancement and Standardisation -
Media Fragments - Download and link to fragments of media
Media Annotations - Add related data to media
WebVTT - Mark up external text track resources
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.
@maboa - jPlayer.org