如何使用Javascript將VTT文件讀入陣列和循環

Question

我有一個帶有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);  
 

 
     }); 
 

 
      
 
});

這裏爲w我的帽子是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 Player JS API中使用它們。

Answer 1

這是最終爲我工作。

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

 
     }); 
 
});

Answer 2

這是否會產生您所追求的內容？

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" 
    } 
]