HTML5 media and data URIs

In a recent email conversation with Slava Paperno of Cornell University who builds applications for language teachers, he brought something to my attention that I was unaware of. Namely that HTML5 audio and video also accept Data URIs as a source, as well as standard file URLs.

I must admit that I’m not sure why I wasn’t aware of this before, but sometimes things are staring you in the face and you refuse to see them, as this is such an occasion.

Data URI

A Data URI takes the format:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>
									

The MIME-type specifies what type of data the URI contains. So if you wanted to provide a data URI for an image you would specify it as follows:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
									

The MIME type used here is image/png indicating that the encoded data is a PNG image.

Audio

Similarily, if you wanted to encode an Ogg audio file, you would use the MIME type audio/ogg as follows:

<audio controls src="data:audio/ogg;base64,T2dnUwACAAAAAAAAAAA+..........+fm5nB6slBlZ3Fcha363d5ut7u3ni1rLoPf728l3KcK" />
									

If you want to specify an MP3 file you would simply set the MIME type to audio/mp3 and provide the encoded MP3 audio data string.

See an example of a data URI audio source.

Video

Providing a data URI for an encoded video is just the same, providing the correct MIME type for the correct encoded data, and of course they can be used in conjunction with the source element:

<video controls>
  <source type="video/webm" src="data:video/webm;base64,GkXfowEAAAAAAAAfQoaBAUL3gQFC8......jVOrhB9DtnVTrIMQTPc=">
  <source type="video/mp4" src="data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29....../l/L+X8v5AAAAMgfDg==">
</video>
									

See an example of a data URI video source.

Encoding in base64

Of course the code examples provided above don’t display the full data URI for any of the audio and video files as they would fill the entire page! To encode the data I simply used PHP‘s base64_encode function as follows:

function getEncodedVideoString($type, $file) {
   return 'data:video/' . $type . ';base64,' . base64_encode(file_get_contents($file));
}
									

Which was used by the HTML:

<video controls>
   <source type="video/webm" src="<?php echo getEncodedVideoString('webm', 'parrots-small.webm'); ?>">
   <source type="video/mp4" src="<?php echo getEncodedVideoString('mp4', 'parrots-small.mp4');?>">
</video>
									

Of course you can use whatever you like to encode the files, this is just an example. And while you may not want nor need to base64 encode your audio and video files (these reasons on why you might base64 encode images might be just as relevant), it’s still good to know that you can should the need arise.