在 EPUB3 文件中使用查询字符串

Question

我正在制作一本包含 140 个(短(视频的 EPUB3 电子书。有一个索引文件，其中包含指向具有HTML5视频元素的单独showVideo.html文件的超链接。我的想法是通过查询字符串将每个视频文件名提交给showVideo.html，通过javascript读取查询字符串并将值放入视频元素中。

索引文件链接：

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

如果我将以下代码写入content.opf文件的manifest，这确实有效：

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

但是，如果我这样做，我必须在清单中添加 140 个项目。仅排除清单中的查询字符串不起作用：

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

你们可能有解决方案吗？查询字符串方法只是我的想法，也许有更好的技术。

谢谢

马文

Answer 1

为了避免epubcheck过于挑剔的检查，你可以执行以下操作。

1. 将 data-video 属性添加到 <a> 元素，如 <a data-video='E1'> 所示。

2. 将事件侦听器添加到相关<a>元素上的click事件。

3. 在事件处理程序中，将location.href设置为 "showRef.html?Unit=" + elt.dataset.video 或等效项。

4. 在 showRef.html 中，解析查询字符串并执行正确的操作。

Answer 2

由于您无论如何都使用 JS 来解析视频的 ID，请尝试使用片段标识符而不是查询参数： <a href="showVideo.html#E1">这样您不会收到验证错误，并且可以在 JS 中检索值作为location.hash。

Answer 3

如果你真的想使用JavaScript，试试Liza Daly的建议---记住你的EPUB 3电子书现在可能只能在iBooks上运行(也许是Readium和Kobo应用程序(。

如果您的唯一目的是"选择"视频，为什么不简单地为每个视频生成一个XHTML页面，并将播放列表中的链接指向它们呢？ 毕竟，140 并不是要添加到清单中的大量元素。

或者，您可以使用div s(带有关联的 CSS 属性 page-break-after ， page-break-before (创建一个 XHTML 页面，例如 videoplayer.xhtml

：

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

以便您的播放列表将链接到 videoplayer.xhtml#video001 ，等等。不使用JavaScript，你有更好的机会在多个设备上工作。