0

hope your are having an excellent evening!

I am trying to implement WebVTT-based captioning for MP3 audio files for some training content.

Our current solution is to use the HTML5 <video> and <track> tags, setting the source to an MP3 file, and using native VTT functionality this way.

This works great for all browsers except IE/Edge. In those browsers, the audio plays as expected, the VTT file is downloaded by the browser, the player controls are visible, but the captions do not display.

The WebVTT captions work fine for MP4 video files in IE/Edge, so I wouldn't suspect a problem with the VTT files (MIME type, etc). I have swapped in known-good VTT files to make sure it wasn't a formatting issue either as I know IE's parser is strict and picky.

If anyone has any suggested troubleshooting steps or insight on why it's not working or how to fix, I'll be supremely grateful!

Best,

Neurax

Neurax
  • 3,657
  • 2
  • 13
  • 18
  • I don't have an IE to test, but it sounds like a bug. One workaround would be to wrap your audio track in an mp4 container, with no video track. (you could test `ffmpeg -i yourfile.mp3 yourfile.mp4` or even ffmpeg -i yourfile.mp3 -codec copy yourfile.mp4` if you don't want to reencode your mp3 to aac.) – Kaiido May 09 '18 at 02:12
  • Thank you for your insight, I did try this out, unfortunately unsuccessful. That's a helpful trick on converting audio files. It seems that if there is no video track, IE/Edge won't load the frame element that would hold the captions. Still looking for a fix that doesn't include parsing VTT and writing a canvas controller. – Neurax May 09 '18 at 03:33
  • ... And even if instead of an ` – Kaiido May 09 '18 at 03:35
  • Ah, awesome, thank you for the follow-up. I did give that a go, I think it's just the frame element not showing up. I'm researching how to do a 1px tall or wide video track. That could work. – Neurax May 09 '18 at 04:03

0 Answers0