3

我用谷歌搜索并搜索了几天，但我只能找到谈论字幕的 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 事件也没有被挂钩。过了一会儿，Chrome 开始给我关于跨域引用文本轨道的错误。我不知道为什么它突然开始这样做。

但无论如何，总之...

- 我不知道如何正确（显然）将某些东西绑定到 cuechange 事件，或者您输入提示的事件。

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

如您所知，我也尝试过 kind="captions" 和 kind="subtitles"。其中没有一个对我有用。一些帮助会很可爱。:)

4

1 回答 1

0

您的代码中有几个问题：

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

于 2013-09-01T06:17:53.120 回答