Links within DIV and automating

[differentj]

I've created an Ebook for interactive transcripts using VTT, Audio file, and some HTML code which thanks to one of the people who code sigil who really pointed me in the right direction.

As I'm using Sigil I believe I'm getting a better grasp of things but I'm running into two issues I'm wondering if someone would help me out with.

My HTML code has javascript which is pointing to three DIV elements.

<div 
id="JavaScript"
data-audio="MP3" 
data-transcript="VTT"  
/>

When I try to link the "MP3" or "VTT" files it tells me I cannot enter a link here. I have to essentially create a line with a comment or text line and insert the link then copy and paste into the div element. I'm assuming I'm doing something wrong but that's the only place in my HTML the linking to the files is done.

Secondly and this may tie into the issue above is that I'm trying to create several different Ebooks this way. For each Ebook the MP3 and VTT change as well as some text at the top of the page regarding what the content is for. Is there a better way to have the div elements point to whatever is in the audio folder and video folder automatically or when I change the audio / video in those files have the links auto update?

Here is what my actual code in Sigil currently looks like so you can see how I'm manually pasting the links:

<div id="webvtt-player" data-audio="../Audio/Wretched Stuff - A VERY GOOD FRIDAY.mp3" data-transcript="../Video/Wretched Stuff - A VERY GOOD FRIDAY.vtt">

Thank you for any and all help!

[KevinH]

Those are not links. Those are "data-" extra custom attributes being applied to a div tag. These are meant to be read only by an underlying javascript or in css. These are not pure urls either as they are not properly url encoded (using a name full of spaces is generally not a good idea across multiple readers). Sigil will not auto update any of these custom attributes when you use Sigil to rename a file as they are just a set of custom data being passed to something else (in this case a javascript) and there is no way for Sigil to know what those custom attribute values represent.

A div can not actually directly html link out according to the spec. Instead to create an html link you must use a anchor ("a") tag with href or an object tag, or iframe or ....
Are you actually trying to create an html link?

Have you linked the javascript properly inside the head tag?

As for your second issue, not that I know of. But as filenames are not seen by e-reader users, why not just rename the mp3 and vtt files to some generic name in each book.
Or use a batch script to build the epub on the fly from the command line with any info you want. Or instead pass manifest ids and then your javascript could just parse the opf to get the current filenames with those manifest ids.

[Doitsu]

You might find the old IDPF epub3 test file helpful.
They use the following code for a video with vtt subtitles:

<video controls="" width="278" height="240">
	<source src="../video/screencast.mp4" type="video/mp4"/>
	<source src="../video/screencast.webm" type="video/webm"/>
	<track kind="subtitles" src="../video/tracks/screencast.vtt" 
	srclang="en" label="English" default="default"/>
	If this text is rendered, the video element is not supported and the test fails.
</video>

[differentj]

Originally Posted by KevinH

Those are not links. Those are "data-" extra custom attributes being applied to a div tag. These are meant to be read only by an underlying javascript or in css. These are not pure urls either as they are not properly url encoded (using a name full of spaces is generally not a good idea across multiple readers). Sigil will not auto update any of these custom attributes when you use Sigil to rename a file as they are just a set of custom data being passed to something else (in this case a javascript) and there is no way for Sigil to know what those custom attribute values represent.

A div can not actually directly html link out according to the spec. Instead to create an html link you must use a anchor ("a") tag with href or an object tag, or iframe or ....
Are you actually trying to create an html link?

Have you linked the javascript properly inside the head tag?

Thank you for the Reply! I haven't done web coding in 24 years and a lot has changed and the help is needed and appreciated.

I'm using the HTML based off of https://github.com/umd-mith/webvtt-player and I know enough to change some of the stuff listed but the javascript is beyond me.

Currently I create a local HTML file based on the web player and import it into Sigil. I change some of the wording and I import into Sigil the audio file and the VTT which are from my computer that I generate. Then I am trying to link the audio and video files which are in Sigil into the html so when it compiles an ebook the div elements are pointing to the audio and video files that were within sigil.

No HTML linking at all.

I was thinking maybe I could just declare variables to the audio and video file then assign them to the DIV parts the existing code is looking for but I'm in the trap where I didn't write the code so I am definitely fumbling through this but learning as I go

[KevinH]

Do you know if the data-audio and data-transcript are supposed to be relative to where the javascript file is located or relative to the file that links to the javascript?

In your example they appear to be relative to the location of the xhtml file that links the javascript.

Does your hand coded example actually work? If not what javascript error message appear in the javascript console that is part of Preview's Inspector?

[differentj]

It's a sloppy implementation on my part but the HTML and javascript are all in the same HTML page and it works on my apple devices in iBooks when I create the EPUB.

I'm going to say the files are relative to the links to the javascript.

The div webvtt and data-audio and data-VTT I mentioned above is the only reference in the entire EPUB to those files. The Javacript looks for those declarations and runs perfectly.

If I'm doing something wrong or could do it better then I'm definitely here for that as right now I'm just creating a link to those data files within Sigil for each ebook then pasting them into the DIV section as shown in the original post and then deleting how I'm getting the link into the document hence why I'm asking if there's a better or easier way.

I'm sorry if that doesn't answer the question well enough.

By the way I do like the suggestion to keep an EPUB as kind of like a template and I've started doing that, thank you.

[KevinH]

Some recommendations:

- make sure you are creating an epub3 not an epub2 as javascript can only work in epub3

- make sure javascript is enabled in Sigil Preferences.

- put all javascript into its own file to prevent issues with xml escapes with less than and greater than inline in an xhtml file

- create a link to your javascript file in head (or tell Sigil to link it)

- use Sigil's Add Existing... menu to add the audio and vtt files to your epub so they are properly included in the opf manifest. Use short simple file names.

Try to get it working in Sigil's Preview and use Sigil Preview's Inspector javascript console to debug any javascript issues.

If you run into trouble, create a sample epub3 with your javascript and the the worlds shortest transcript and mp3 and post it here and I will try to help get your short sample working for you.

[differentj]

Solid recommendations and I will try that and will post back if I need additional help!

[differentj]

Originally Posted by Doitsu

You might find the old IDPF epub3 test file helpful.
They use the following code for a video with vtt subtitles:

<video controls="" width="278" height="240">
	<source src="../video/screencast.mp4" type="video/mp4"/>
	<source src="../video/screencast.webm" type="video/webm"/>
	<track kind="subtitles" src="../video/tracks/screencast.vtt" 
	srclang="en" label="English" default="default"/>
	If this text is rendered, the video element is not supported and the test fails.
</video>

This will be very helpful for all things EPUB and may help with KevinH's recommendation, thank you!

[differentj]

Originally Posted by KevinH

Some recommendations:

If you run into trouble, create a sample epub3 with your javascript and the the worlds shortest transcript and mp3 and post it here and I will try to help get your short sample working for you.

I apologize but was running out of time for now and glossed over the world's shortest transcript and audio possible part but in case a dropbox link is ok I am attaching the way that works and my attempt at your suggestion.

Following your suggestions I was surprised I wasn't already set for Epub 3 but I wasn't and I did enable Javascript as well.

Honestly I'm just dumbfounded on how to link the data-audio and data-mp3 and I may not have even included the javascript right in the html.

This is all very bare bones but it's something I plan on building more into later.

Not working example with suggested attempt
https://www.dropbox.com/s/fnd2e15y8m...ript.epub?dl=0

Original method that was working
https://www.dropbox.com/s/fnd2e15y8m...ript.epub?dl=0

There's a download option when the link is loaded and it will download the epub. If I do need to create the world's shortest audio and transcript file I can definitely do that but it won't be until later tonight.

[KevinH]

I think you posted the exact same link twice. At least it downloaded th exact same filename.

I will try to play around with the Not Working one to see if I can figure out why.

[differentj]

Link to working example

https://www.dropbox.com/s/kmhg310jft...ript.epub?dl=0

I think it was an error on my end.

I really appreciate the help and hope this could help someone else one day as well!

[KevinH]

Attached is a working copy of the epub (it works in Sigil anyway). The issue was where the external javascript was being loaded. That javascript will fail to find the webvtt-player node unless it is placed **after** the div in question. It will NOT work if loaded in head like normal javascripts are.

Unfortunately, that javascript code is minified and hard to follow.

Since the epub is over the site limit of 20 meg in size, I have removed the audio and vtt files to create this epub. Just add them back with the names you used before and all should work.

Hope this helps,

KevinH

ps. to get this to work use Sigil's Add menu to add back:

audio.mp3

and

transcript.vtt

And they should end up in Audio/ and Video/ respectively.

[KevinH]

If you want to leave it in head you can try using the "defer" boolean attribute on the script tag link.

Update: even adding "defer" to the script did not work. My guess it is uses the point where the script is loaded to start inserting its DOM tree. So it must be loaded just before the body end tab.

If you are familiar with javascript you can probably change this behaviour.

[differentj]

KevinH, You've definitely spent more time on this than I could have asked for and thank you.

I definitely have a better base to build up from then where I began and that alone makes this worth while for me, Thank you!

I'll see what I can figure out regarding the link issue as it's ultimately what's driving me crazy as I can't change the linking within Sigil for the data-audio and the data-transcript without adding a place in the body where I can grab the location then remove (like an a href), or rename all files when I import them and not break the linking that way.

I've tried some methods I found online for replacing innerhtml through javascript and HTML elements underneath the

<div id="webvtt-player" data-audio="data-audio" data-transcript="data-transcript">

section or at the beginning of the script section but nothing was working for me.

I'll post if I find a way to change links within the Div id to the files or a workaround in case anyone else comes across something similar in the future.