我有一个为JW Player准备的带有字幕的VTT文件,我正尝试创建一个交互式脚本。为此,我需要将VTT文件读入一个数组,然后与数据交互。
下面是VTT文件中的一个片段:
1
00:00:00 --> 00:00:05
65 MEP we have twitter handles for both of us on screen as well so if you want
2
00:00:05 --> 00:00:08
to interact with those afterwards that's the best way to do so now been going to
3
00:00:08,051 --> 00:00:12,310
be talking about a topic that's extremely important topic in my mind and
下面是我的Javascript:
$.get('http://dev.sharepoint-videos.com/test.vtt', function(data) {
// Read all captions into an array
var items = data.split('\n\r');
console.log(items);
//Loop through all captions
$.each(items, function( index, value ) {
var item = items[index].split('\n');
console.log(item);
});
});
下面是我的Console.log返回的内容
0: "1
↵00:00:00 --> 00:00:05
↵65 MEP we have twitter handles for both of us on screen as well so if you want
"
1: "↵2
↵00:00:05 --> 00:00:08
↵to interact with those afterwards that's the best way to do so now been going to
"
2: "↵3
↵00:00:08,051 --> 00:00:12,310
↵be talking about a topic that's extremely important topic in my mind and
"
Whis不是想要的结果。我对Javascript还是新手,我正在尝试做的是将每个标题读入数组,然后循环捕获开始和结束时间以及标题,以便我可以在JW播放器JS API中使用它们。
3条答案
按热度按时间9jyewag01#
这就是最终对我起作用的方法。
dw1jzc5e2#
这能生产出你想要的东西吗
上面的代码在两个新的行字符上拆分组,然后再在一个新的行字符上拆分组。
结果是:
643ylb083#
这有点晚了,但是浏览器(现在)已经有了你想要实现的内置功能。
首先,确保按照MDN上的WebVTT文档中提到的那样格式化VTT文件。下面是根据规范格式化的数据。
注意,我添加了头文件
WEBVTT
并修改了所有时间戳以强制使用HH:MM:SS.TTT
,另一个允许的时间戳是MM:SS.TTT
,请参阅MDN上的CueTimings以了解更多信息。既然VTT数据是有效的,让我们来讨论一下方法。要使用的内置特性是track元素、视频元素和TextTrack接口API。
TextTrack API需要视频元素中的轨道元素。它需要src目标来获取VTT文件。一旦设置好,它的mode必须更改为"隐藏"或"显示",以便可以从VTT文件中的解析提示填充TextTrackCueList。填充TextTrackCueList后,我们可以从该对象中获取每个成功解析提示的id、计时、文本和其他内容。
请参阅MDN上的提示以了解详细信息。
现在,让我们来看看代码。
输出: