Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.
Previous Post: Working with Images
Embedded audio and video is defined as actually packaging the files into your eBook, while streaming audio and video is linking your HTML markup to a server (e.g. YouTube) where the eReading device downloads it for use by the reader. So, the good news is that embedded audio and video only works on the Kindle App for iOS devices (i.e. Kindle for iPad, iPhone, etc.), which is a small fraction of readers, and streaming audio and video is not allowed inside Kindle eBooks at all. This sort of makes for a difficult interactive experience. Since embedded audio and video files are massive in size, it is almost pointless to include them in an eBook you plan on selling at the Amazon Kindle store. Nevertheless, you should become familiar with the HTML5 elements that make embedded audio and video possible in the hopes that future Kindle hardware and software will be able to support them.
The Rise of HTML5 for Audio and Video
For a long time, audio and video on websites was only supported by a sloppy plug-in process with Adobe's Flash Player that was equally cumbersome no matter what browser you were using. Following Steve Jobs' quip that Flash was lousy for mobile devices, web standards have been shifting toward the much easier to code and consume HTML5 elements for multimedia. All major browsers support the new audio and video elements and provide automated, simple controls to play the media, adjust the volume, and mute.
The problem lies with the fact that different browsers recognize only specific formats. This is due to codec licensing fiascoes and the fact that all the major players (Apple, Microsoft, Mozilla, Google, etc.) having different ideas on the best way to encode multimedia. Amazon has chosen to go with the codecs that are supported by Microsoft and Apple, which is the mp4 format for videos and mp3 format for audio. If you have audio and video content that you want to embed that is not in the mp4 or mp3 format, you can convert it with open source software such as VLC.
Embedding Audio and Video in Your eBook
The HTML5 elements for embedding audio and video are fairly simple. Suppose you had a video of a baby hanging out with the relatives in northeastern Thailand in a file called baby.mp4, along with some amusing audio in a file called babyscreaming.mp3. Some sample HTML code would be as follows:
<p>I'm one of those annoying fathers that is so boring he only talks about his damn kids.</p>
<p> <audio src="babyscreaming.mp3" controls title="Audio of a Baby Screaming"></audio></p>
<p><video src="baby.mp4" controls poster="images/babyplaceholder.jpg" title="Video of a Thai Baby"></video></p>
<p>That's it for right now.</p>
|Embedded Audio and Video in the Chrome Browser|
The audio and video files will not play until the user clicks on them. Notice that, like the img element, the <audio> and <video> tags are nested within paragraph tags to give them block element behavior (i.e. on their own line). There are ways to make the audio and video play automatically in web browsers, but this is highly annoying for people goofing off at work and will not be discussed in this guide.
Let's break down each of these attributes within the HTML5 multimedia tags. The src attribute (required) is similar to the img element in that it specifies a relative path to the source file. The controls attribute (required) tells the browser or eReading device to use the automatic controls programmed into the software. The title attribute (optional) provides a description of the content that is generally displayed when the mouse pointer is rolled over the controls. The poster attribute (optional) in the video element provides an image to be shown in the video frame until the reader clicks the video to play.
Amazon imposes some additional requirements beyond the HTML5 specification to ensure a good reading experience across all Kindle devices. If the reader is not using the Kindle App for iOS, then there should be a way to at least inform them that there is multimedia accompanying the eBook. The additional requirements per Amazon are as follows:
- Audio and video files must be kept in a separate directory entitled audiovideo (e.g. audiovideo/baby.mp4)
- Metadata about the description of the multimedia and its length in minutes and seconds must be provided within the paragraph tags (e.g. A Video about Baby (00:20)</p>)
- Fallback text must be provided within the audio or video element if the Kindle device cannot render the mp3 or mp4 format (e.g. <video…This device does not support the required audio or video format. Please view it at my website.</video>)
- Multimedia content requires a reference in the Table of Contents
<p>I'm one of those annoying fathers that is so boring he only talks about his damn kids.</p>Important Note: The fallback text in between the <audio></audio> or <video></video> tags will only render if the multimedia files cannot be read by the eReading device. The content after the </audio> or </video> tag will always render.
<p> <audio src="babyscreaming.mp3" controls title="Audio of a Baby Screaming">This device does not support the required audio or video format. Please view it at my website.</audio> An Audio Clip of Baby Screaming (01:34)</p>
<p><video src="baby.mp4" controls poster="images/babyplaceholder.jpg" title="Video of a Thai Baby"> This device does not support the required audio or video format. Please view it at my website.</video> A Video about Baby (00:20)</p>
<p>That's it for right now.</p>
The audio and video will be embedded properly on Kindle iOS apps; however, the fallback content of telling the reader to check out baby on a website will appear on older e-ink Kindles, Kindle App for Android, and the Kindle Fire. Below is an example of how the same HTML markup would render on the Kindle Fire and Kindle iPad app:
|Example of Fallback Content and Embedded Content|
Embedding of video and audio in Kindle eBooks leaves much to be desired due to the lack of support. However, future Kindles will most likely move toward supporting this content to provide a more interactive experience for the reader—one can only hope.
Next Post: Working with Tables