Использование строк запроса внутри файла EPUB3

Я создаю книгу EPUB3, содержащую 140 (коротких) видеороликов. Существует индекс-файл с гиперссылками к отдельному файлу showVideo.html, который имеет элемент видео HTML5. Моя идея состояла в том, чтобы отправить каждое имя файла видео через строку запроса на showVideo.html, который считывает строку запроса с помощью javascript и помещает значение в элемент видео.Использование строк запроса внутри файла EPUB3

Index ссылка на файл:

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

Это действительно работает, если я пишу следующий код в manifest моего content.opf файла:

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

ли вы, ребята, возможно, есть решение? Метод строки запроса был только моей идеей, может быть, есть лучшая техника.

Спасибо

Марвин

источник

2013-07-04 bearli

Вы говорите: «Это не работает» - как это работает? Ошибка 'epubcheck'? Не работает на платформе электронного чтения? Кроме того, есть ли причина, по которой вы не добавляете атрибут 'properties = 'scripted'' в элемент' '? –

Мне жаль торазабуро, я забыл описать. Он не работает на Readium, который является нашей системой считывания ссылок. Нажатие на гиперссылку завершается с ошибкой, если в файле-манифесте нет файла содержимого. «Сценарий» стал для меня новым, но я буду использовать его с этого момента :-). Спасибо. – bearli

Я немного удивлен поведением Readium. В любом случае, я подозреваю, что это сработает, если вы построили href во время загрузки (например, 'Array.prototype.forEach.call (document.getElementsByTagName (" a "), function (a) {a.setAttribute (" href "), «showVideo.html +»? »+ a.dataset.videoName);});'). Но решение Лизы звучит идеально. –

Чтобы избежать излишней тщательности проверки epubcheck, вы можете сделать следующее.

Добавьте атрибут data-video к <a> элемента, как и в <a data-video='E1'>.
Добавить прослушиватель событий на мероприятие click по соответствующим <a> элементам.
Внутри обработчика событий установите location.href на номер "showRef.html?Unit=" + elt.dataset.video или его эквивалент.
В пределах showRef.html проанализировать строку запроса и сделать правильную вещь.

источник

2013-07-08 10:41:34

Спасибо, я попробовал это. Код JS: 'var el = document.getElementById (" a_E1 ");' и 'el.addEventListener (" click ", function() {el.href =" showVideo.html? Unit = "+ el.dataset. video;}, false); '. Никаких проблем вообще в чистом Chrome, но никаких шансов в Readium нет. На клик нет реакции, как будто ссылка отсутствует в 'manifest'. ... – bearli

Это не то, что я имел в виду. Я имел в виду, что внутри обработчика ячеек явно задано 'window.location.href'. Я делаю это сам (фактически используя фрагменты '# id' вместо строк запроса, и он отлично работает в Readium. –

Также не забудьте установить' evt.preventDefault() 'из обработчика. –

Поскольку вы используете JS, чтобы разобрать идентификатор видео в любом случае, попробуйте использовать идентификатор фрагмента вместо того, из параметров запроса: <a href="showVideo.html#E1"> Вы не получите ошибку проверки таким образом, и вы можете получить значение в JS как location.hash.

источник

2013-07-05 00:43:11

Спасибо, Лиза, я пробовал это за пределами epub-контейнер, и он работал как шарм. Удивительно, но внутри контейнера я получаю его только в том случае, когда в 'showVideo.html' есть элемент с« d »под названием« E1 »(помимо других 139 видеофайлов). : ''E1': идентификатор фрагмента не определен в 'OPS/showVideo.html'' = щелчок гиперссылки делает белую страницу. – bearli

Это расстраивает. Epubcheck пытается быть полезным, потому что думает, что вы забыли ссылку, но, конечно, она не понимает вашу цель. Я забыл, что он тоже будет жаловаться на хрупкость. К сожалению, я думаю, что ваш лучший выбор - это подход Альберто Петтарина выше, хотя я согласен, что глупо это делать. –

Если вы действительно хотите использовать JavaScript для этого, попробуйте то, что предложила Лиза Дали, учитывая, что ваша электронная книга EPUB 3, вероятно, будет работать только на iBooks (возможно, в приложении Readium и Kobo).

Если ваша единственная цель - «выбрать» видео, почему бы вам просто не создать одну страницу XHTML для каждого видео и не указать ссылки из плейлиста на них? 140 не является большим «числом» элементов, которые должны быть добавлены в манифест, в конце концов.

В качестве альтернативы, вы можете создать одну страницу XHTML, скажем videoplayer.xhtml, используя div с (с соответствующими CSS свойствами page-break-after, page-break-before), как это:

<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, у вас есть больше шансов, что он будет работать на нескольких устройствах.

источник

2013-07-05 07:26:33

Имея одну страницу xhtml со всеми видео и используя свойство разрыва страницы, это хорошая идея, однако это приводит к ошибке Oh, Snap Chrome (слишком много видео в одном файле заставляет браузер терпеть неудачу - я попытался вставить все видео на моем ранее указанный индексный файл). Конечно, я мог бы использовать, допустим, 3 xhtml-документа, которые не приводят к этой ошибке. – bearli

Использование строк запроса внутри файла EPUB3

ответ

Смежные вопросы