jquery 如何使用Javascript将VTT文件读入数组和循环

vsmadaxz  于 2023-01-04  发布在  jQuery
关注(0)|答案(3)|浏览(388)

我有一个为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中使用它们。

9jyewag0

9jyewag01#

这就是最终对我起作用的方法。

$.get('http://dev.sharepoint-videos.com/test.vtt', function(data) {
     
     // Read all captions into an array
     var items = data.split('\n\r\n');
     
     console.log(items);
    
     //Loop through all captions
     $.each(items, function( index, value ) {
      
      var item = items[index].split('\n');
      console.log(item);    

      });
 });
dw1jzc5e

dw1jzc5e2#

这能生产出你想要的东西吗

var data = `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`;

data.split("\n\n").map(function (item) {
  var parts = item.split("\n");
  return {
    number: parts[0],
    time: parts[1],
    text: parts[2],
  };
});

上面的代码在两个新的行字符上拆分组,然后再在一个新的行字符上拆分组。
结果是:

[
  {
    "number": "1",
    "time": "00:00:00 --> 00:00:05",
    "text": "65 MEP we have twitter handles for both of us on screen as well so if you want"
  },
  {
    "number": "2",
    "time": "00:00:05 --> 00:00:08",
    "text": "to interact with those afterwards that's the best way to do so now been going to"
  },
  {
    "number": "3",
    "time": "00:00:08,051 --> 00:00:12,310",
    "text": "be talking about a topic that's extremely important topic in my mind and"
  }
]
643ylb08

643ylb083#

这有点晚了,但是浏览器(现在)已经有了你想要实现的内置功能。
首先,确保按照MDN上的WebVTT文档中提到的那样格式化VTT文件。下面是根据规范格式化的数据。
注意,我添加了头文件WEBVTT并修改了所有时间戳以强制使用HH:MM:SS.TTT,另一个允许的时间戳是MM:SS.TTT,请参阅MDN上的CueTimings以了解更多信息。

const data = `WEBVTT

1
00:00:00.000 --> 00:00:05.000
65 MEP we have twitter handles for both of us on screen as well so if you want

2
00:00:05.000 --> 00:00:08.000
to interact with those afterwards that's the best way to do so now been going to

3
00:00:08.000 --> 00:00:12.000
be talking about a topic that's extremely important topic in my mind and`;

既然VTT数据是有效的,让我们来讨论一下方法。要使用的内置特性是track元素、视频元素和TextTrack接口API。
TextTrack API需要视频元素中的轨道元素。它需要src目标来获取VTT文件。一旦设置好,它的mode必须更改为"隐藏"或"显示",以便可以从VTT文件中的解析提示填充TextTrackCueList。填充TextTrackCueList后,我们可以从该对象中获取每个成功解析提示的id、计时、文本和其他内容。

    • 注意:**简单来说,cue是VTT文件中的一个块。例如,这是一个cue:
1
00:00:00.000 --> 00:00:05.000
65 MEP we have twitter handles for both of us on screen as well so if you want

请参阅MDN上的提示以了解详细信息。
现在,让我们来看看代码。

// Creating dummy video and track elements. 
const videoElement = document.createElement("video")
const trackElement = document.createElement("track")

// A dataURI for this example. Substitute correct URL here
const dataURL = "data:text/plain;base64," + btoa(data)

// variable to access TextTrack interface API
const track = trackElement.track

videoElement.append(trackElement)
trackElement.src = dataURL

// Important: set mode to hidden or showing. Default is disabled
track.mode = "hidden"

/** Replace this function with whatever you wanna do with Cues list.
  * This function takes the array-like object which is a cues list,
  * and extracts id, startTime, endTime, and text data from each cue.
*/
function processCues(cues) {
    for (const cue of cues) {
        console.log(`
            id: ${cue.id},
            startTime: ${cue.startTime},
            endTime: ${cue.endTime},
            text: ${cue.text}
        `)        
    }
}

// Could be optional for you. Apparently, track.cues was not instantly 
// populated so I'm using timeout here as a workaround. 
setTimeout(processCues, 50, track.cues)

输出:

id: 1,
startTime: 0,
endTime: 5,
text: 65 MEP we have twitter handles for both of us on screen as well so if you want

id: 2,
startTime: 5,
endTime: 8,
text: to interact with those afterwards that's the best way to do so now been going to
 
id: 3,
startTime: 8,
endTime: 12,
text: be talking about a topic that's extremely important topic in my mind and

相关问题