javascript - 使用 cuechange 事件和轨道元数据时出现问题(HTML5 视频)

Question

我用谷歌和搜索了几天，但我只能找到谈论字幕的 HTML5 视频轨道示例，而且我找到的还不是很完整。基本上，我想做的是:

-当我输入一个提示时，我需要访问该提示的数据。

-文本数据(至少我认为是文本...)包含一个数字。该数字对应于我文档中其他地方的 img id。然后我对图像做了一些事情。

这看起来应该非常简单，但我不确定从哪里开始。我正在使用 Jquery。

这是我的一些代码片段:

在我的 $(document).ready 函数中，我有以下...

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...
});

我的 html 视频标签如下所示:

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

而我的 Webvtt 文件是这样的(时间范围下面的数字是我需要使用的幻灯片编号)

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

当我最初几次在 Chrome 中调试我的代码时，似乎没有任何与轨道关联的提示数据(我检查了代码中其他地方的提示，它们是空的)。 cuechange 事件也没有被 Hook 。过了一会儿，Chrome 开始给我关于跨域引用文本轨道的错误。我不知道它为什么突然开始这样做。

但总之，总之……

-我不知道如何正确(显然)将某些内容绑定(bind)到 cuechange 事件，或者为此输入提示的事件。

-我不知道如何访问我需要使用的数据。

如你所知，我还尝试了 kind="captions"和 kind="subtitles"。这些都不适合我。一些帮助会很可爱。 :)

Answer 1

你的代码有几个问题:

//get the track property of the track
var t = $("#track1").prop("track");

//activate track
$.prop(t, 'mode', 'hidden');

$(t).on("cuechange", function () {
    //this already refers to the track object
    //get all activeCues
    var mycue = $.prop(this, 'activeCues')[0];

    //if we don't find an active cue abort
    if(!mycue){return;}
    var imgnum = mycue.text;
    var image = $("img#" + txt);//I'm not worried about this part yet...I never get here
    //perform actions on image...
});

您也可以尝试以下演示 http://jsfiddle.net/trixta/QZJTM/