|

Using HTML5 video in ePub

This was an experiment and is a bit of a hack. Most people seeking to embed video in ePub should use the Flash method described earlier.

I wanted to see if could construct a valid ePub file using HTML5 (in this case, employing the HTML5 <video> element). The problem is that ePub only supports one kind of HTML: XHTML 1.1, a flavor of markup which seems to exist only to annoy people trying to create valid ePub files.

There are two methods to include “foreign” media types in ePub. The first is out-of-line items which have separate fallback items, either out-of-line XML in another vocabulary, or a separate type of binary media like a movie falling back to a static image.

The other is Inline XML islands, which uses a unique <ops:switch> element to toggle among two or more different XML vocabularies.

My first instinct, if I were going to include the HTML5 <video> element, was to make an inline XML island and switch between that and the Flash fallback. But <ops:switch> depends on the XML island having a different namespace. HTML5 uses the standard XHTML namespace (http://www.w3.org/1999/xhtml), so there’s no way to indicate that we’re using an XHTML vocabulary that isn’t XHTML 1.1.

Got that?

But there’s another option: treat the whole HTML5 page as an out-of-line island. How? By not using the XHTML vocabulary at all, but instead treating it as media-type text/html:

[xml]
<!– HTML5 –>
<item id="video"
href="video.html"
fallback="video-fallback"
media-type="text/html"/>

<!– XHTML 1.1 fallback –>
<item id="video-fallback"
href="fallback.html"
media-type="application/xhtml+xml" />
[/xml]

Here I defined a document with an unsupported media-type (text/html) and a fallback in a supported type (application/xhtml+xml). Unfortunately there’s no way for me to actually specify that it’s HTML5, since HTML5 doesn’t even have a real DOCTYPE.

I also include the media files in the OPF:

[xml]
<item id="video-mp4"
href="20143.mp4"
media-type="video/mpeg4"/>
<item id="video-ogg"
href="20143.ogv"
media-type="video/ogg"/>
<item id="video-png"
href="video.png"
media-type="image/png"/>
[/xml]

And here’s the complete HTML5 island:

[xml]
<!DOCTYPE html>
<html>
<head>
<title>Video test</title>
</head>
<body>
<p>
<video width="320" height="240" controls="true" autoplay="true">
<source type="video/ogg" src="20143.ogv" />
<source type="video/mp4" src="20143.mp4" />
</video>
</p>
</body>
</html>
[/xml]

Here’s the sample file: HTML5 video in ePub. This will actually work in Bookworm, but nowhere else. It’s also not valid according to epubcheck, but only because epubcheck thinks that the text/html item is an error, and it doesn’t like that the HTML5 island is missing a namespace (because it’s not actually XHTML, but text/html).

|

37 Responses to Using HTML5 video in ePub

  1. Pingback: ePub books with video: Tips from Liza Daly, creator of Bookworm | TeleRead: Bring the E-Books Home

  2. Peter Sorotokin says:

    Good catch! I think ops:switch also can take required module name in addition to the namespace, but it should be given a specific value for (X)HTML5. I have created an issue in IDPF database, so this can be addressed by the WG in errata.

  3. Peter Sorotokin says:

    BTW, XHTML has to be used instead of HTML so that only a standard XML parser is all what is ever needed in a (potentially resource-contrained) reading system. Also most members of the WG have an opinion that rigid syntax rules are better for interoperability. HTML can always be mechanically converted to XHTML at authoring time, so there is no loss of functionality there. Any HTML5 syntax can also be expressed in XML by design.

  4. Pingback: Liza's Experiment in advancing ePub with HTML5 tag | epubBooks Blog - Information & Resources on the ePub Standard

  5. Liza Daly says:

    Thanks Peter. I didn’t know if I wanted to submit it as an issue since it’s kind of an edge case.

    An epub reader has to also have a CSS parser in addition to an XML parser: http://idpf.org/2007/ops/OPS_2.0_final_spec.html#Section1.4.2

    I would have liked to see the CSS requirement dropped (for the reason you state), and allow any XHTML schema, but my wishlist for epub is another post.

  6. Liza Daly says:

    See Peter’s issue and the resulting comments: Using ops:switch with HTML5.

  7. kira says:

    Actually, you can produce valid epub files using HTML 4.0 strict or transitional standards to get valid epubs too.

  8. Seb says:

    Great job Liza, but how about the size of the final epub.
    How many videos can you really embed in an epub without “breaking the limits” ? Imagine you want to insert some training videos into a graphist learning epub for student or pro, how many of videos can you reasonnably put in ?

    Thanks and congrates again for thoses developpments and communicate on it.

  9. Liza Daly says:

    Seb,

    You can make epub files as big as you like, according to the spec. The practical limit on OPS file size in the Sony Reader doesn’t apply here since it doesn’t support video anyway.

    The main thing I’d be concerned with is ordinary download size. You can get a sense of the range in sizes for epub books, but I’d say that bigger than 5MB is pushing it, and 10MB will be too much for people to download on small devices.

    In theory you aren’t supposed to embed resources from the web in an epub book (for example, hotlinking an image), but I think it makes sense to do so with video. If you were distributing an ebook that required a lot of video, I’d probably provide a huge version with everything bundled (for offline use) and another one that simply plays video hosted on YouTube or elsewhere.

  10. Seb says:

    Thanks Liza.

    In fact, we (my publishing society) plot to release ebooks with video like we did illustrated books before. We’d like to offer new kinds of perspectives, like in a Photoshop manual where illustrations are replaced by videos.

    So, i guess, for smartphone devices and netbook, epub is the solution.

    Seb

  11. Pingback: A Million Thoughts NL » iPad enzo….

  12. Frank Lowney says:

    I’ve been looking at Apple’s recently released content developer documentation for iTunes LP and iTunes Movie Extras, see:
    http://www.apple.com/itunes/lp-and-extras/

    Like ePub, TuneKit is based upon open web technologies and, so, they are more similar than different from one another. Apple will also support the ePub format with an iPad application called iBooks.

    All of this caused me to wonder whether some kind of merger might be in the offing. Will TuneKit evolve beyond music and movies to encompass text or will ePub evolve beyond text to encompass interactive rich media? Apple now has a substantial history of involving itself in open standards organizations. Examples include WebKit and the tags Apple added to RSS.

    Speaking of RSS, the further question is whether there will be a non-commercial distribution model, perhaps adding .epub and .itlp to the list of podcastable file types.

    Thoughts?

  13. Matthew says:

    Hi Liza, I downloaded the video.epub file to test in Bookworm, but when I try to upload the file, I get an error message “The file you uploaded was not recognized as an ePub archive and could not be added to your library.” Has anyone else been able to get it to work in Bookworm?

    Also, Seb, what is the name of your publishing society? I am very interested in embedding video into ebooks, and would love to hear about what you’ve been able to do.

    Thanks!

    -Matthew

  14. Liza Daly says:

    Matthew: You might’ve downloaded the wrong thing off that page; it’s not obvious which is the correct link to get the epub. Here’s the correct link: http://threepress.googlecode.com/svn/trunk/bookworm/library/test-data/data/video.epub

    I was able to download that file and then upload it to Bookworm successfully.

    (I’ll update the post as well.)

  15. Matthew says:

    Liza,

    That worked perfectly! Thanks so much.

    Is there a reason this will only work in Bookworm? Why can’t other epub readers get past what you’ve done to the code?

    -Matt

  16. Liza Daly says:

    Matt:

    It might work in other ereaders that are based on browser technology that happens to support the <video> element, but I’m not aware of any that do. (It may just happen to work on some that are based on the WebKit browser engine.)

  17. Dave Cramer says:

    If you set the media type of the HTML5 island to application/xml rather than text/html, the whole ePub will be valid according to ePubCheck 1.0.5. I’ll leave it to others to argue how kosher that might be!

  18. Gerald Schmidt says:

    Hi Liza,

    As you suggest this works really well in WebKit-based readers, thanks! I’ve been wondering if iPad ePubs support HTML5. The January announcement promised video, which I took to mean some degree of HTML5 support in iPad ePubs (it clearly didn’t mean Flash support). So far the demos I’ve seen show plain text and images only – has anyone seen audio/video working in iBooks? and offline storage would be nice too, of course.

    -Gerald

  19. Liza Daly says:

    iBooks doesn’t support HTML5 video (at least as I implemented it in this sample epub).

  20. Gerald Schmidt says:

    That’s good to know. I must have misunderstood the keynote. Thanks!
    -Gerald

  21. Arthic Leo says:

    Hi Liza,

    Does any ebook reading device such as iPad support flash (.swf) ePUB? If so, could you please let me know?

    Sorry for all, even after coming across the whole blog i couldnt find the answer for my question. Hence i supposed to post this here. May my lack of knowledge played here:)

  22. Liza Daly says:

    No reading device other than computers supports Flash, though some non-Apple tablets probably will.

  23. Koan-Sin Tan says:

    Hi Liza,

    iBooks DOES support HTML5 video. See http://www.tandroid.org/html5-video-in-ibooks-app

  24. Jose Bermudez says:

    Hello Koan-Sin Tan’
    What type of editor for epub do you use? I tried to download the attached epub on that site but i could not read the video code… It says “if video tag doesnt work for you, you’ll see this line”
    Did you do Liza’s steps to add the video so that you could read it on ipad ibooks?
    Also, does anyone know how to make an image larger if you tap on it, Im new at this so any tips are helpfull
    thanks

  25. Liza Daly says:

    Jose Bermudez: You can make an image larger just by including a larger image in the epub and hyperlinking the small one to that.

  26. voddou says:

    Hi,

    I ttried to launch your file with ADE and I don’t see the Video…

    Why ?

    Thanks.

  27. Liza Daly says:

    Because ADE does not support HTML5 video.

  28. voddou says:

    Thanks. So if I want to create an Epub with a video readable with ADE, Kindle, Ipad,…, How can I do ?…

  29. Liza Daly says:

    You can’t. There’s no method that will work on all platforms.

  30. tenaka says:

    Hello Liza,

    Thank you for your great work !

    I’ve managed to insert a video on a epub and read it properly on my ipad but…

    when I want to add another video, let’s say 2-3 pages further, i come with a blank space.

    I used the same code as the first one, aka :

    if video tag doesn’t work for you, you’ll see this line

    My guess is that ibooks, or the epub format isn’t able to deal more than one video or tha it thinks that it is the same one.

    Maybe we could add some id tag to the code but, I confess, I’m kinda new at this and have no professional knowledge in html.

    Thank you in advance for your answers.

  31. Liza Daly says:

    Hi Tenaka,

    I haven’t experimented with multiple videos, but make sure that they are both listed in the OPF manifest and have different ids.

  32. Arthic Leo says:

    Hi Liza,

    Could you please advise is there any reading devices or e-readers that would support audio embedded ePUB files other than ADE. If yes, will it read the audio file? Please advise.

    Regards,
    A.E.Arthic leo

  33. Liza Daly says:

    It’s likely that iBooks would support the HTML5 audio tag as it does HTML5 video, but that would not be a valid epub book.

  34. A.E.Arthic Leo says:

    Hi Liza,,,

    thanks for your reply…..

  35. Pingback: Embedded Video Support in ePubs | Luchita

  36. Vasu says:

    Hello,
    Apple’s iBook New In Version 1.1.2 supports Video and Audio
    “• Experience books that include audio and video.”

    Can any one help me with how to embed video into ePub’s I did try using the Video.ePub provided by Liza, but I was only able to see a Black Box in iBooks, I was not able to play the video.

    Any help or inputs appreciated.

    Thanks
    Vasu

  37. Vasu says:

    I followed Koan-Sin Tan advice and now I using below code, we are able to play video’s in iBooks

    Code for Video:
    —-

    Hello World: My First EPUB

    Hello World: My First EPUB
    This is the content of my first EPUB book.
    The following is an HTML5 video. The iBooks.app for iPad is amazing. It can display the HTML5 video without problem.

    if video tag doesn’t work for you, you’ll see this line