Friday, May 31, 2013

EPUB3 Now! at IDPF DigitalBook World 2013

On Wednesday, I was invited to talk about EPUB3 at IDPF's Digital Book World Conference which is part of the Book Expo America going on in New York City this month.

My basic thesis is that EPUB3's promise is as a galvanizing, common goal for both ebook publishers and ebook designers and production workers that will enable all of us to move forward together, even if it means getting to our objective at different times. Because EPUB3 doesn't break EPUB2 books in older ereaders, there is no reason to put off using EPUB3 right now. And because many ereaders are already supporting many of EPUB3's flashier features—some of which I show off in this presentation, there are lots of good reasons to go ahead and make the jump.

In my talk, I mention the fact that Hachette, part of the second largest publisher in the world and one of the Big Six in the United States has announced that not only will they soon deliver all of their ebooks in EPUB3 format, but that they will stop delivering books in EPUB2. They haven't served books in Kindle format since 2007.

The promise of a single file that works on all systems is before us, and EPUB3, our common goal, is what will enable us to get there.

I have not only published my slides, but I re-recorded my talk so you can get all of the details. Be sure to activate the audio portion.

(I couldn't get the audio to play in Chrome, but it seems to work just fine in Safari.)

Note that you can download (or buy) the EPUB3 version of What's up with Catalonia? that I use as a sample in my talk here.

You can buy the Monarch Butterfly book on the iBookstore.

Barcelona Beyond Gaudí is available both at the iBookstore and on my website.
I welcome comments and suggestions.

Thursday, May 16, 2013

Video in Kindle books, thanks to EPUB3

Yesterday, I wrote about how you can call external audio/video files in an EPUB3 document. This works brilliantly in iBooks and Readium, but so far, nowhere else. What happens when it doesn't work is actually pretty interesting. According to the spec, you can add a fallback message, and indeed a fallback photo or link. In this case, I've used the poster image as a fallback image.

<p>Does everyone have their own cat videos? I sure do. Here are Nighty and a very small Momo playing the box game.</p>
    <video controls="controls" poster="image/poster.jpg" width="384" height="276">
    <source src="" />
    <source src="" />
    <p><a href=""><img id="poster" width="384" height="276" src="image/poster.jpg" alt="poster" /> Click to play the video</a> and then return to read the rest of the book. </p>

The only problem is that Adobe Digital Editions is the only EPUB ereader that properly displays the fallback message.

Adobe Digital Editions - video fallback

But it's nice. If you click the link, your default browser opens, and the video plays.

Unfortunately, if you open the EPUB file on the NOOK, or in Kobo (even the Kobo for iOS app), or even if you open it in iBooks without internet access—and thus the video cannot be displayed—you get varying things—sometimes the poster image, sometimes controls but no video—but no fallback content.

Kobo - no fallback

Fallback leads to video for Kindle books

But what about Kindle? Suppose you take that EPUB3 file, and pass it through KDP, or Kindle Previewer, or KindleGen, which all do the same thing—convert an EPUB file to KF8/mobi. And yes, they work on EPUB3 files as well as EPUB2 files. Next, open that converted mobi file in a Kindle Fire.

The fallback text, photo, and link appear, and better yet, when you click the link, Kindle Fire sends you to the browser, and plays the video. When you're done, the back arrows take you back to the book.

If that's not enough, stick it on Dropbox, and open your Dropbox app on an iPad. Once it's been copied, click the Open in another application arrow (upper right corner) and choose Kindle for iOS. Again, the fallback text, photo, and link appear, and when you click them, the video plays. It's true that you get an error message, but I'm guessing there's a way to get around that, but regardless, the video plays anyway. As if it were in a special window inside the Kindle iOS app. And when you've finished watching the video, click Done, and you go right back to the book.

So let's sum up:

1. So far, you can only play an embedded video right on a page in an ebook in iBooks and NOOK. But B&N won't let self- and indie publishers add such books to Pub It!.

2. You can play external video files right on a page in an ebook only in iBooks.

3. The fallback text doesn't appear in NOOK or Kobo.

4. The fallback text does appear in ADE and—if you convert the EPUB3 file to KF8/mobi—it also appears in Kindle Fire and Kindle for iOS (perhaps other Kindles too?), and all of these let you play the fallback video in an external browser.

5. An added caveat: I haven't uploaded a book to KDP with a link to external video. I can't guarantee that such a thing is permitted.

6. This opens up a lot of possibilities.

You can download the mobi file here. And if you liked this post, consider subscribing to my blog so I have time to write more!

Tuesday, May 14, 2013

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="" />
<source src="" />

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="" 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:

Online Content Off

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.

Access online content?

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

External video - working

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)

External resources - no internet

It works in Readium too:

Online content in Readium

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.

Wednesday, May 1, 2013

Controlling spreads in EPUB3 Fixed Layout

EPUB 3's spread settings should allow you to decide when individual documents are placed next to each other on a 'synthetic' spread in a book. For example, you might want to show two consecutive pages in a spread if the device is held in landscape orientation but individually if it's held in a portrait orientation. According to the spec, that's possible. In real life, on real devices, it's not.

Let's look at the different options, since they're not very self-explanatory.

First, you can find a quick overview on this earlier article about EPUB 3 fixed layout.

EPUB 3 has three important fixed layout rendition properties, layout, spread, and orientation. The first is the one that determines if an EPUB 3 document is fixed layout or not. So, if you want a fixed-layout book, you'll add the following code to the meta section of your opf file.

<meta property="rendition:layout">pre-paginated</meta>

And if you want a flowing book, you'll leave it out to use the default value of reflowable. Can you mix fixed layout and flowing pages in a single book? Theoretically, yes, by adding the property to individual pages in the spine section, but unfortunately not in the real world. At least not yet.

The spread property determines when pages should be placed next to each other in a 'synthetic' spread. The default is for the first page to be shown by itself on the right, and each two pages after that to be shown opposite each other in a spread. With EPUB 3's spread options, you can choose to have pages always be shown independently (none), only when the device is in landscape mode (landscape), only when the device is in portrait mode (portrait), in both orientations (both), or just use the automatic settings of the reading device (auto).

So, for example, here's what it looks like in iBooks if you choose none. Each page is shown in its own spread.

rendition:spread-- none in iBooks

Unfortunately, iBooks doesn't support any of the other options, which would be very welcome. You might have a fixed-layout book that looks great in two-page spreads in landscape orientation, but that is too small in portrait view. By choosing landscape, you could force the spread in landscape, but allow for the individual pages to fill the device in portrait as well. Hopefully some day in the future.

There are additional page-spread properties that you can apply to individual pages (in the spine section) to indicate that a page should always be shown on the left side of a spread or on the right side of a spread. But I have not been able to get them to work in iBooks either.

It does work in Readium, though. Notice how the Introduction page here has been forced to display on the left, which both leaves the previous page by itself (not shown), and pulled the subsequent page next to it:

Forced left hand page

Readium doesn't seem to support any of the other spread options. No matter what I choose, it always initially shows a single page, and then if I change the options in the Settings box, it shows two.

The third property is orientation. This is how you force a book to always be displayed in one orientation or another, regardless of the way the reading device is held. The choices are landscape, portrait, and auto, and the first two options constrain the display to the given orientation.

So, if you choose auto, the book rotates with the reading device. Here's what it looks when held horizontally:

Landscape orientation iBooks

And here's what it looks like if it's rotated to a portrait orientation:

Auto orientation with device held vertically

But if you choose either landscape or portrait, then no matter how the reader holds the device, the book will always be shown in that orientation. Here's a book with the landscape orientation chosen, with the device being held vertically:

landscape forced

More of my books