All lines of captions not seen

[elz64]

Hi, I'm testing captionator and got it running, except the sub tiltes are not managed until the third one (nothing happens in the DOM for the 1st and second captions....

here's one of the very basic srt file: WEBVTT

1 00:00:0,500 --> 00:00:5,951 This is a simple example for srt captions

2 00:00:7,166 --> 00:00:15,883 Simply use a srt-file and append: <a href="file.srt" class="track" data-enabled="true">My srt file</a>

3 00:00:16,000 --> 00:00:18,962 ... to your media element

4 00:00:21,999 --> 00:00:24,368 There are more options, we will explain soon.

5 00:00:24,999 --> 00:00:31,368 Try to be accessible and nice to your users :-)

Thank you

[cgiffard]

Hi - looks like your timestamps are invalid.

You need to zero-pad the hours, minutes and seconds, and you need to use a full-stop as a separator for WebVTT (or a comma in SRT.)

So, your timestamp 00:00:0,500 --> 00:00:5,951 should really be 00:00:00.500 --> 00:00:05.951 in order to be valid under the WebVTT spec. Captionator throws out captions it can't read, which is why you haven't seen the first three.

If you're unsure, check your file against Anne van Kesteren's WebVTT validator: http://quuz.org/webvtt/

[elz64]

Hi,

thank you!

It's a bit weird and confusing for me between vtt and srt formats. I made a mix of them. The pb is also coming from the use of this nice little tools http://www.nikse.dk/SubtitleEdit which seems to corrupt file in some case.

However I'm still bothered by htmlentities : how to use < and > into caption lines ?? If I put >My srt file</a>, then this line will be ignored.

If I add < srt file>/a> then this line will outputs /htmlenities /into the caption (will display '>' instead of' >' etc.)

Any clue ?

Regards,

Eric

Le 20/02/2012 01:34, Christopher Giffard a écrit :

Hi - looks like your timestamps are invalid.

You need to zero-pad the hours, minutes and seconds, and you need to use a full-stop as a separator for WebVTT (or a comma in SRT.)

So, your timestamp 00:00:0,500 --> 00:00:5,951 should really be 00:00:00.500 --> 00:00:05.951 in order to be valid under the WebVTT spec. Captionator throws out captions it can't read, which is why you haven't seen the first three.

If you're unsure, check your file against Anne van Kesteren's WebVTT validator: http://quuz.org/webvtt/

---

Reply to this email directly or view it on GitHub: https://github.com/cgiffard/Captionator/issues/24#issuecomment-4046753

[cgiffard]

Hrm. That shouldn't be the case - I'll run some tests and get back to you. :)

[elz64]

Hi again,

I'm kncking my head to the wall trying to solve how to make the captions canvas coming at the right place when the payer is turning to some full-screen mode.(modal) In this case tha caption are still z-index: 100 (I think it's not useful to set it hard at line 2162 of captionator.js.

I think using the option appendCueCanvasTo so I hope it could be css styled only.

But I'm even not sure if the syntax is ok. And if do, nothing happens, canvas is still appended to body.

if (window.addEventListener) { window.addEventListener("load",loadVideo,false,{"appendCueCanvasTo": '#cc1', "controlHeight" : 80}); } else if (window.attachEvent) { window.attachEvent("load",loadVideo,{"appendCueCanvasTo": '#cc1', "controlHeight" : 80}); }

Any suggestions ?

Thank you

[cgiffard]

Hi Eric,

I'm sorry to hear you're still having trouble, and I'll do my best to try and assist!

I agree that setting z-index isn't the best idea, and I will consider patching Captionator to calculate the z-index based on that of the video (I may also create another runtime configuration option to set the z-index manually.)

Could you describe how the canvas isn't displaying properly? Is it missing or misaligned? Are you using native fullscreen (moz/webkitRequestFullScreen) or some other method?

I have a bug open for some rendering issues caused by Captionator's use of position: absolute, which may relate to your problem.

That said, I'm not sure exactly what you're doing with window.addEventListener there. To the best of my knowledge, and upon checking with MDN, addEventListener does not support sending arguments to the listener functions - you'll need to use an anonymous function like so:

window.addEventListener("load",function() {
    myFunction(myArgument1, "myArgument2", 5, 2 {"someObject":"someValue"});
},false);

Additionally, you'll need to explicitly pass the options to Captionator - through the captionator.captionify() function when you first call it:

captionator.captionify(null,null,{
    "appendCueCanvasTo": "#myObject"
});

Otherwise, Captionator won't pick up on the options at all!

If you could send me the chunk of code where you call captionator.captionify(), it would help me a lot more to understand what's going on. :)

[elz64]

Thank you for your concerns

Le 28/02/2012 01:03, Christopher Giffard a écrit :

Hi Eric,

I'm sorry to hear you're still having trouble, and I'll do my best to try and assist!

I agree that setting z-index isn't the best idea, and I will consider patching Captionator to calculate the z-index based on that of the video (I may also create another runtime configuration option to set the z-index manually.) sure, but at any time this z-index should be the highest as possible. It's not a risk to set it to 100 000.

Could you describe how the canvas isn't displaying properly? Is it missing or misaligned? Are you using native fullscreen (moz/webkitRequestFullScreen) or some other method? I'm using jme. I'm not a big developper, much more integrator/designer so i'm affraid I'm not able to understand every thing

I have a bug open for some rendering issues caused by Captionator's use of position: absolute, which may relate to your problem.

That said, I'm not sure exactly what you're doing with window.addEventListener there. Well I've just copied what I found in some examples. (with almost no idea of what it does...) So I just cant undersatnd your git documentation (mostly because there's no real example ) To the best of my knowledge, and upon checking with MDN, addEventListener does not support sending arguments to the listener functions - you'll need to use an anonymous function like so:

window.addEventListener("load",function() { myFunction(myArgument1, "myArgument2", 5, 2 {"someObject":"someValue"}); },false); sorry this is too far away from my js skills. Can you explain each argument in this sample ? What is someobjet: somevalues ??

Additionally, you'll need to explicitly pass the options to Captionator - through the captionator.captionify() function when you first call it:

captionator.captionify(null,null,{ "appendCueCanvasTo": "#myObject" }); hmm, I tried (may be) such a thing with no result.

you can see it live here: http://www.interface-handicap-accessible.com/jme/captionator.js http://www.interface-handicap-accessible.com/jme/captionator-api-demo3.js
(called in the middle of the html) http://www.interface-handicap-accessible.com/jme/demos/more-examples/demo4.html
the current test

the main issue is the full screen mode switch where cc are not displayed in the new context but seams to stay under, with the originals size they had when they are called.

Thank again

Eric