Linking to external video (and audio)* in EPUB3

I forget when I first saw the option in the iBooks settings panel, but I know it was a long time ago. Enticingly, it said Online Content, and had an On/Off switch. And underneath was a short explanation: “Allow books to access publisher's content from the Internet.”

EPUB used to be a strictly closed affair; all of its content had to live within the EPUB package itself. But in EPUB3 an exception was made to allow remote access for audio and video elements only. These two things together could only mean one thing: that remote video was now possible in an ebook, at least on the iPad.

Why is it important to be able to access remote video and audio files? For starters, keeping your audio and video out of the EPUB can make your EPUB a lot smaller and much more agile. It will download much more quickly. On the other hand, in order to see that video, your reader is still going to have to download it at some point, and they might even do it multiple times, which can be a drag on your server.

Another reason to host video or audio remotely is to give access to multiple formats of the file. EPUB3 has the capability of looking through a series of links and only using the one that works best in a given ereader. Including multiple versions of a video file in an EPUB file would result in unnecessary bloat. (Of course, this is a bit of a moot point in a world in which video and audio in EPUB mostly works in iBooks, but that is changing with Readium, and surely with newer ereaders. The fact that there is no agreed upon codec for video is also an important factor.)

Finally, if the video is hosted remotely, that means you can update it at any time. Note, however, that you must be careful to maintain the same link that exists in the EPUB file.

The code

So how do you do it? I've tried a bunch of different techniques in the last few months, but couldn't make it work. Today, while reading Matt Garrish and Markus Gylling's EPUB 3 Best Practices, I discovered that they have figured it out. It's not complicated at all, I should have figured it out too :)

The code is very straightforward and not that much different from embedding video files right in an EPUB document.

1. First, in the HTML document (mine's called outvideo.xhtml), create the video element as usual, obviously using the proper URL for the src attribute:

<video controls="controls" poster="image/poster.jpg" width="384" height="276">
<source src="http://www.elizabethcastro.com/epub/examples/catbox.mp4" />
<source src="http://www.elizabethcastro.com/epub/examples/catbox.wvm" />
</video>

Although the controls attribute isn't required, I recommend it. Otherwise, your reader won't be able to start (or stop) your video. Also note that I was playing around with WebM video, but wasn't really able to get it to work. But I haven't given up yet.

2. In the content.opf file, you have to do two things: list your video in the manifest as if you'd included it in the EPUB document, and then declare that the HTML file that contains the video points to an external resource.

a. First, we'll manifest the video.

<item id="vid" href="http://www.elizabethcastro.com/epub/examples/catbox.mp4" media-type="video/quicktime" />

b. Next, in the manifest of the HTML file that contains the video, declare that you're using an external resource:

<item id="outvideo" href="outvideo.xhtml" media-type="application/xhtml+xml" properties="remote-resources" />

And that's all there is to it. What does it look like?

If your reader has the Online Content option in iBook preferences Off, all they'll see is the poster image:



If your reader has Online Content On, they'll be asked if they want to access your online content. It's good that they have a choice, since they may want to wait to download videos until they have wifi available.



Finally, once they click the Allow button, the video will download and become available.



Keep in mind again, that if they no longer have connection to the Internet, the video will stop being available (even if they never close the book or leave iBooks)



It works in Readium too:



You can download the example file here.

*Update: Yes, audio works too. Don't forget to use mime-type audio/mpeg when declaring audio file in content.opf file. And making sure your file paths match the actual file locations helps too :) Thanks to Alberto Pettarin for help troubleshooting.