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事件也没有被挂钩。一段时间后，Chrome开始向我提供有关跨域引用文本跟踪的错误。我不知道为什么它突然开始这样做。

但无论如何，总之......

- 我不知道如何正确地（显然）将某些内容绑定到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/

使用cuechange事件和跟踪元数据时遇到问题（HTML5视频）

1 个答案: