Embedding multi/rich media

You can add interactive and rich media to epubs in various ways. The easiest is in Flash, but that’s not going to work on the iPad (and possibly other devices that choose not to support Flash). For embedding flash, see our tips below. We don’t yet have tips for other ways to add interactivity or rich media, but highly recommend this screencast by Liza Daly for more info.

Flash

You can include video or audio in an epub as single SWF files.

First, have your SWF file(s) ready. (There are a variety of tools available online for creating SWF. You’ll have to experiment with quality and file size to find a good balance.)

Put the SWF files in the OEBPS folder. (If you like, put them in a subfolder, say, “swf”.)

Put this code (and adjust as necessary) in the XHTML file(s) where you want the SWF to appear. In this example, we’re embedding an audio track, where the video component is only a controller bar. The same code would work for almost any SWF file.

<p>Track name</p>
 <div>
  <object type="application/x-shockwave-flash" data="filename.swf" width="" height="">
   <param name="movie" value="filename.swf" />
   <param name="play" value="false" />
   <param name="loop" value="false" />
  </object>
 </div>

• The “Track name” we have here is a caption that will appear above the SWF in the epub. Change it as appropriate, or leave it out if you don’t want a caption.
• In two places here, change filename.swf to the file name of the SWF file you’re embedding. (Remember to include the folder path if you put your SWF files in a subfolder in OEBPS.)

Tech note: The div is necessary for nesting the object in, otherwise you’ll get an error (“entity not allowed in this context in the relevant namespace”) when you test the epub using epubcheck. You can change the div class (here, swf) to whatever suits you, or leave it this way.

Then define any display preferences you need for the SWF’s div in the CSS file. For example, you can add some space below it:

.swf {
	margin-bottom: 1.00em;
}

Finally, remember that everything in the epub package must be listed in the manifest. Add each SWF file to the manifest in content.opf. You’ll need a line like this there for each track:

<item id="insertidname" href="filename.swf" media-type="application/x-shockwave-flash" />

• Change insertidname to a unique name for each track
• Change filename.swf to the relevant SWF file’s file name (remember to include the folder path for SWF files in a subfolder of OEBPS).