questions on usage
gkatsev opened this issue · comments
Hello, I'm trying to figure out how to use vtt.js exactly. I'm able to parse out a webvtt file and get it displayed but I'm not sure what the usage of processCues is exactly.
I created a gist with my example. In it, I use one of two js files: process-all.js and process-jit.js.
process-all.js calls WebVTT.processCues with all the parsed cues and then on timeupdate, I move captions from the div (captions-area) passed into processCues to a "display area" (captions-display).
process-jit.js filters the cue list into the currently active cues and then calls WebVTT.processCues with the filtered list and I pass in the the display area, which is where I want my captions to be displayed ultimately.
process-jit.js seems like it does a more accurate job but I wasn't sure whether that is what we want to do.
I'll try and get a jsbin or something set up with these two examples.
Hey @gkatsev! Glad to see vtt.js being used :-). Just took a quick look and it does seem like process-jit.js is the correct way to do it. WebVTT.processCues computes the display state of all the cues passed to it as if they are displaying on the captionDiv at the same time. What this means is that you only want to pass it cues that are showing on the video together at any one time. The way your doing it in process-jit.js is essentially the way we use it in Firefox as well, excepting some more optimizations we've made in the Gecko code that handles the cues that are passed to WebVTT.processCues.
Hope that helps! Let me know if you need anymore clarification.
Awesome, thanks. I think it's worth adding to the documentation these "next steps" because until I read the code to know that cues get the displayState property set to the displayed div did I figure out process-all.js and then later I realized that I probably want process-jit.js.
One thing I also am unsure about is that when I was using process-jit.js with this caption file, the captions were set at the top of my div though, I thought the default would be the bottom.
@gkatsev, my pleasure. It'd be helpful if you said some more about what exact documentation and where would have been helpful. That would be very informative when I go to add it. Pull requests are welcome too if you have time and do want to contribute.
One thing I also am unsure about is that when I was using process-jit.js with this caption file, the captions were set at the top of my div though, I thought the default would be the bottom.
That does sound like it may be a bug. Would you be able to post a more full code example of that or a JSFiddle or something like that?
A note to say that processCues should be called with the list of cues you want displayed at that moment of the video. I'll see if I can put something together.
Yep, I'll definitely set up a jsbin or fiddle with my process-jit.js file.
@RickEyre here's a jsbin: http://jsbin.com/liliwehega/1 the specific code is at the bottom of the js portion. Seems like the bug occurs only in chrome. In firefox, the captions show up correctly at the bottom of the div but in chrome they show up at the top.
Awesome, thanks for that example. My initial suspicion is that it's not working on chrome as vtt.js is using window.VTTCue to construct new cue objects, which in this instance is Chrome's native implementation of VTTCues. Chrome doesn't implement the latest spec that vtt.js does. So there is a mismatch between the VTTCue object and what it would be on the latest spec. Specifically the line property, I believe. Then when processCues runs it doesn't work correctly because the cue's properties are not correct.
What I would suggest doing is alter vtt.js to use the shim that is provided in the lib folder. If that works, I think we could merge that into master as well, if it's done in such a way so that it's an optional configuration option.
Going to close this since my original question was answered. I'll open an issue re: the chrome/vttcue problem if needed.
Thanks!