Using query strings inside of a EPUB3 file

Question

I am producing a EPUB3 ebook containing 140 (short) videos. There is a index-file with hyperlinks to a separate showVideo.html file that has a HTML5 video element. My idea was to submit each video filename via query string to the showVideo.html which reads the query string via javascript and puts the value into the video element.

Index file link:

<a href="showVideo.html?unit=E1">Click to watch E1</a>

This does indeed work if I write the following code into the manifest of my content.opf file:

<item id="vid_player" href="showVideo.html?unit=E1"
 media-type="application/xhtml+xml"/>

But if I do it that way, I have to add 140 items to the manifest. Just excluding the query string in the manifest does not work:

<item id="vid_player" href="showVideo.html" 
 media-type="application/xhtml+xml"/>

Do you guys possibly have a solution? Query string method was just my idea, maybe there's a better technique.

Thank you

Marvin

Answer 1

To avoid epubcheck's overly fastidious checking, you can do the following.

1. Add a data-video attribute to the <a> element, as in <a data-video='E1'>.

2. Add an event listener to the click event on the relevant <a> elements.

3. Within the event handler, set location.href to "showRef.html?Unit=" + elt.dataset.video or the equivalent.

4. Within showRef.html, parse the query string and do the right thing.

Answer 2

Since you're using JS to parse the ID of the video anyway, try using a fragment identifier instead of a query param: <a href="showVideo.html#E1"> You won't get a validation error that way, and you can retrieve the value in JS as location.hash.

Answer 3

If you really want to use JavaScript for that, try what Liza Daly suggested --- bearing in mind that your EPUB 3 eBook will probably work now only on iBooks (maybe Readium and Kobo app).

If your only purpose is to "select" the video, why don't you simply generate one XHTML page for each video and point your links from the playlist to them? 140 is not a big "number" of elements to be added to the manifest, after all.

Alternatively, you can create a single XHTML page, say videoplayer.xhtml, using divs (with associated CSS properties page-break-after , page-break-before) like this:

<div class="videoplayer" id="video001">
 <video src="video001.mp4" ... />
</div>
<div class="videoplayer" id="video002">
 <video src="video002.mp4" ... />
</div>
...
<div class="videoplayer" id="video140">
 <video src="video140.mp4" ... />
</div>

so that your playlist will link to videoplayer.xhtml#video001, etc. Not using JavaScript, you have better chances it will work on multiple devices.