Using HTML5 video in ePub

by Liza Daly

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:

    <!-- 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" />

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:

  <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"/>

And here’s the complete HTML5 island:

<!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>

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).