Search code examples
javascriptquery-stringepubepub3

Using query strings inside of a EPUB3 file

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

Solution

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