WebVTT captions - tricky issue - removing captions background
- or -
Post a project like this1241
£30/hr(approx. $38/hr)
- Posted:
- Proposals: 2
- Remote
- #3065236
- Awarded
Description
Experience Level: Expert
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.
LINKS:
jsFiddle demo:
https://jsfiddle.net/Etienne79/5u7fokzb/29/
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.
Thank you!
Istvan
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.
LINKS:
jsFiddle demo:
https://jsfiddle.net/Etienne79/5u7fokzb/29/
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.
Thank you!
Istvan
Istvan P.
100% (1)Projects Completed
1
Freelancers worked with
1
Projects awarded
100%
Last project
15 Nov 2020
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies