0

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?

Yannic Hamann
  • 4,655
  • 32
  • 50
  • Can you please inform us whether you are testing this issue with the MS Edge legacy browser or you are testing with the MS Edge Chromium browser? Also inform the exact version of the browser. It can help us to make a test and check the issue. Thanks for your understanding. – Deepak-MSFT Apr 27 '20 at 02:36
  • Sorry for not mentioning that earlier, my windows has the following browser installed by default ``Microsoft Edge 44.18362.449.0, EdgeHTML 18.18363``. So I guess the answer is legacy... BTW: IE 11 has the same problem (but I don't bother supporting this browser) – Yannic Hamann Apr 27 '20 at 02:50
  • I tried to download your webvtt file and try to test the issue locally. I made a test with Microsoft Edge 44.18362.1.0 Microsoft EdgeHTML 18.18362 I can see the issue in the MS Edge browser. Output: https://imgur.com/a/KcKS7aP I try to search about the issue but I did not get any explanation about it. I will do further research to get any helpful information for this issue. – Deepak-MSFT Apr 29 '20 at 09:16
  • Thanks for looking so deep into the issue. Did I understand you right, you can reproduce it? I have a live version of the highlight functionality [here](https://marleneschulz.info/texte/prosa/heute-am-siebten/). You can see that IE11/Legacy Edge don't highlight every word while firefox and chrome is working as intended. This is due to the ``cuechange`` event not triggering for cues with a time interval = 0. In case you need some more information let me know. ``.vtt`` is different from above. – Yannic Hamann Apr 29 '20 at 12:38
  • I also tested your live version of the highlight functionality and I can see that some words don't get highlighted in the MS Edge legacy browser. This is the test result with the Edge browser. https://imgur.com/a/AKeVl5L I suggest you press the ALT + J key in the MS Edge legacy browser and try to provide your feedback about this issue to Microsoft. Thanks for your understanding. – Deepak-MSFT Apr 30 '20 at 08:14
  • Thanks for your help. I will do it but I guess there won't be a fix for it. – Yannic Hamann Apr 30 '20 at 08:58

0 Answers0