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
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.
A Data URI takes the format:
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:
The MIME type used here is
image/png indicating that the encoded data is a PNG image.
Similarily, if you wanted to encode an Ogg audio file, you would use the MIME type
audio/ogg as follows:
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.
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
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:
Which was used by the HTML:
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.