You wouldn’t believe how easy this is. Well, I suppose those who have already done it would but for those of you who haven’t, fear not! You’ll be a pro in about 2 minutes.
HTML5 allows for stunningly simple embedded video and audio in websites and EPUB3 eBooks. Be forewarned though you forward thinking eBook Developers only certain systems can/will support your HTML5 masterpieces.
The current list of devices that support EPUB3 are (let me know if you’ve heard of more!):
- iBooks
- Web-based reading platforms
- many app based readers can – check the stats on your specific concern
Devices working to have fully functioning EPUB3 capabilities:
- Kobo (caution here – Multiple SMIL setups per page are hard for the KOBO, it may drop sound clips sporadically)
- Sony (only via app)
And by way of major eReaders that’s about it. Kindle is slowly adding features in their own .mobi language and Barnes and Noble’s Nook has its own software for making enhanced eBooks that they prefer developers use.
But I digress, this is all you need in the HTML to embed a video (after it’s in your EPUB folder of course – this piece of HTML pre-supposes that you’ve placed the video clip in a file named “video”). Note that “controls” piece inside the tag, that auto embeds controls in your video so that the reader can stop and start the clip and make it full screen.
<video id="videopurple" controls="controls">
<source src="video/yourvideo.mp4" type="video/mp4"/>
<div class="errmsg">
<p>Oops! Your Reading System does not support (this) video.</p>
</div>
</video>
Now on to the content.opf, just declare your video the way you would for any image:
<item id="videopurple" href="video/yourvideo.mp4" media-type="video/mp4"/>
And of course there’s the CSS, you can define the look of the video tag just like any other or like me, you can apply a special ID to your individual videos, affording you the opportunity to alter them individually.
#videopurple {
display:block;
width: px;
height: px;
margin:auto;
margin-top:20%;
}
And there you have it! That’s all it takes! If your readers are in a specific market, be sure to test on the specific device (of course, look who I’m talking to- you guys know this stuff). Also, that nifty div class=”errmsg”, yeah that will tell readers if their device won’t support video. You can style it like anything else:
.errmsg {
color:red;
font-weight:bold;
/* margin-left: -5em; */
}
Other than recommending you use .MP4 for your videos (and possibly also embed a fallback .ogg video – to do this just add a second “source” line in your HTML) that’s all you should need. I do recommend you keep your video embeds fairly simple for the time being, the higher the level of complexity, the more likely you are to run into trouble. That’s not to say you’ll always be limited in terms of complexity but, while eReaders are catching up to the standard, we’re woefully stuck in a middle place.
Enjoy, and let me know if you think something should be added!
You can also check out my guide to using SMIL files in eBooks.