Data URI

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.