I have an HTML5 player that plays an MP3 while also displaying captions. Code is on jsFiddle (link below).
ISSUE there is a default semi-transparent background behind the caption. This is set by default by each browser. And I cannot find a way to get rid of it with normal CSS. It seems that others also have this problem.
HALF SOLUTION: I could only remove it in Firefox using: ::cue { background: transparent !important; } But this doesn't work in Chrome, Safari.
SOLUTION - SWAP TEXT WITH JAVASCRIPT 1) I found one detailed solution on Stackoverflow with the Javascript code included (link below). The solution is for the very same issue. Basically the person is suggesting that the only truly cross-browser solution is to replace the WebVTT caption text on the fly with our own text, using Javascript. If we can do that then we can format the replaced text in any way. However, I am still a beginner regarding Javascript and I cannot implement this alone. It's for my own upcoming website hosting 2-4 pages long audio book samples with captions.
CHECK OUT JSFIDDLE The good thing is that you can check out the issue first on jsFiddle and see if it is something you can solve.
BROWSER COMPATIBILITY NOTE: Firefox: - It seems to ignore the red text highlighting (the styling is in the webVTT file). So maybe another reason to go for this text replacement solution suggested on Stackoverflow.
Stackoverflow, exact same issue with solution: https://stackoverflow.com/questions/32252337/how-to-style-text-tracks-in-html5-video-via-css/45087610#45087610
WORK ESTIMATION: Please estimate the time you need. Or the best, tell me a fixed price.
