I am implementing some custom 'transcript-highlight' functionality around the cuechange
event but came across this weird behavior where the TextTrackCueList
of the track element is incomplete.
Chrome and Firefox don't have this problem. Is this an edge-browser bug or am I missing something?
<audio controls>
<source src="{{ hoerbar.audio_file.url }}" type="audio/mpeg">
<track default kind="captions" src="{{ hoerbar.caption_file.url }}" srclang="de" label="{{ hoerbar.title }}">
</audio>
With the following .vtt
file I get an incomplete list of cues. In fact some cues are missing. E.g:
[...]
132
00:00:55.120 --> 00:00:55.120
mit
[...]
98
00:00:40.000 --> 00:00:40.000
–
[...]
132 and 98 are missing within the cues
property:
var track = document.getElementsByTagName('track')[0];
track.addEventListener('cuechange', function(event) {
console.log(event.target.track.cues);
});
I see now that time time-interval of the problematic cues is zero. But how can I access the missing cues without parsing the '.vtt` file manually? Why is this different from Chrome and Firefox?