Saturday, August 31, 2013

Trouble using cuechange event and track metadata (HTML5 video)

Trouble using cuechange event and track metadata (HTML5 video)

I've Googled and search for a few days, but I can only find HTML5 video
track examples that talk about subtitles, and the ones I've found aren't
really complete. Basically, what I would like to do is the following:
-When I enter a cue, I need to access the data for the cue.
-The text data (at least I think it's the text...) contains a number. That
number corresponds to an img id elsewhere in my document. I do something
to the image then.
This seems like it should be really simple, but I'm not exactly sure where
to start. I'm using Jquery.
Here are some snippets of my code:
In my $(document).ready function, I have the following...
var t = $("#track1")[0];
t.addEventListener("cuechange", function () {
var mycue = this.track.cues[0];
var imgnum = mycue.text;
var image = $("img#" + txt);//I'm not worried about this part yet...I
never get here
//perform actions on image...
});
My html video tag looks like this:
<video id="Video1" controls='controls' width="100%" autoplay>
<source src="videos/video-part1.mp4" type="video/mp4" >
<track id="track1" kind="metadata" src="test.vtt" srclang="en-us" />
HTML5 Video is required for this example. </video>
And my Webvtt file looks like this (The numbers below the time ranges are
the slide numbers I need to use)
WEBVTT
Test1
00:00:00.000 --> 00:00:23.999
00001
Test2
00:00:24.000 --> 00:01:19.999
00121
Test3
00:01:20.000 --> 00:01:39.999
00793
When I debugged my code in Chrome the first few times, there didn't appear
to be any cue data associated with the track (I checked the cues elsewhere
in the code and they were empty). The cuechange event is also not being
hooked. After a while, Chrome started giving me the error about
referencing text tracks across domains. I don't know why it suddenly
started doing that.
But anyway, in short...
-I don't know how to bind something to the cuechange event correctly
(apparently), or the event where you enter a cue either for that matter.
-I don't know how to access the data I need to use.
Just so you know, I also tried kind="captions" and kind="subtitles".
Neither one of those worked for me either. Some help would be lovely. :)

No comments:

Post a Comment