With a hls stream where captions are encoded into the stream in CEA-608, it seems like iOS is rendering the closed captions in a really big font that covers at least 40% of the video, making it impossible to see the places where the captions are overlaid on top of the video.
Please reference the sample screenshot here:
You'll see that the text is showing up in a really big font, and it isn't center aligned, nor is it aligned to the bottom part of the video player area, unlike subtitles.
I'm currently using the video.js plugin, and have filed a similar issue in the GitHub repo.
However, I don't think the issue is in the library, because I can't find the closed captions text string in the DOM. To add to that, it seems like this isn't an iOS Safari specific issue either - it happens in iOS Chrome as well, which led me to think that video captions are controlled at a system level (I imagine that the .ts segments are intercepted to remove the text tracks from the stream before passing it to the browser, so that they can be handled with a unified closed captions mechanism - is this assumption correct?).
In any case, I've scoured various sources when researching the issue, and I've not come across any documentation that explains iOS's display render logic for closed captions with Web video players.
Is this something that can be addressed with a browser API (or some other mechanism), or am I missing something here?
I'd really appreciate any pointers / help - thank you for your time! 🙏
Please reference the sample screenshot here:
You'll see that the text is showing up in a really big font, and it isn't center aligned, nor is it aligned to the bottom part of the video player area, unlike subtitles.
I'm currently using the video.js plugin, and have filed a similar issue in the GitHub repo.
However, I don't think the issue is in the library, because I can't find the closed captions text string in the DOM. To add to that, it seems like this isn't an iOS Safari specific issue either - it happens in iOS Chrome as well, which led me to think that video captions are controlled at a system level (I imagine that the .ts segments are intercepted to remove the text tracks from the stream before passing it to the browser, so that they can be handled with a unified closed captions mechanism - is this assumption correct?).
In any case, I've scoured various sources when researching the issue, and I've not come across any documentation that explains iOS's display render logic for closed captions with Web video players.
Is this something that can be addressed with a browser API (or some other mechanism), or am I missing something here?
I'd really appreciate any pointers / help - thank you for your time! 🙏
Turns out I was wrong! This is what was throwing the styling errors I think: https://opensource.apple.com/source/WebCore/WebCore-1889.1/css/mediaControls.css.auto.html. I also couldn't find it in the DOM because it's in the shadow DOM. I can only cringe at my own inexperience. 😔
Well hopefully this will be helpful to someone! Good day y'all
Well hopefully this will be helpful to someone! Good day y'all
