Firefox not breaking lines on subtitles
Hi, I'm using Jellyfin (like Plex) and when playing something on Firefox the subtitles won't break lines. I checked with the Jellyfin team and they said that the subtitles are rendered on the browser. When I tested it on Chrome it worked as intended. Added two screenshots, one from FF and one from Chrome. Thanks!
Modified
All Replies (7)
Hi,
If it is implemented in-browser, then it is probably using WebVTT: https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API
The standard does support multiple lines in Firefox. Could you get me the .vtt file so I could look at it quickly?
This might be pretty difficult. However, this should be possible by right clicking on the page while the video is playing and selecting "View Page Source". Then, you can search for ".vtt". Just download the file at that url and send it to me.
You can't attach it here, but you can open it in a text editor and paste it in this pastebin. https://paste.mozilla.org/
You also might be able to use the Network Monitor tool to get the URL of the file. That's part of the Developer Tools and generally opens in the lower part of the tab below the page. More info on the Network Monitor:
https://developer.mozilla.org/docs/Tools/Network_Monitor
For example, if you see the file you want to view, you could try
right-click > Open in New Tab
so Firefox re-requests it on its own.
Thank you all.
When I view the page source I see around 20 lines. It seems like it's dynamic web app. I fired up the Developer Tools to inspect the source code and I found this (see attached image).
Looks like the subtitle is enclosed inside DIV and changes on the fly. I couldn't find this DIV on Chrome so I guess Jellyfin have different code to render on FF and Chrome.
When using the Network Monitor on FF I can see only one mp4 file. On Chrome, I see many JS files including one which probably responsible for the subtitles sync (https://paste.mozilla.org/etUZUKKu)
I'm not sure how to proceed since Jellyfin is loading SRT file for subtitles but doing different stuff to show it on FF or Chrome.
BTW, This is the Github page of Jellyfin: https://github.com/jellyfin/jellyfin
Hi Ido, can you share a public URL demonstrating this problem? It doesn't have to be your server if it's under wraps, it could be a demo site somewhere.
Hello,
That js doesn't create those subtitles. It certainly is not the case that they are .vtt files which means that Jellyfin is processing the subtitles itself. Firefox is also definitely displaying that particular line of HTML correctly -- i.e. there is nothing to tell it to create a newline there.
It might be best to check in with the Jellyfin team again and tell them that while the subtitles are rendered in the browser, the issue seems to lie in what the browser has been asked to render.
Hopefully, they can use that screenshot of the HTML to pinpoint the issue.
Best of luck! I hope that this can be worked out. It looks like a really cool project. I use Plex and Emby all the time.
Allright. I just created a new droplet on DigitalOcean to create a demo but what you say make more sense to me. They need to break the line on the DIV itself.
I'll try opening an issue on Github and see if they can fix it.
I'm also using Plex for long time but decided to try Jellyfin as it's open source and it's free. It's still not complete but it's growing fast. Quote from Jellyfin's about page: "Jellyfin is descended from Emby's 3.5.2 release and ported to the .NET Core framework to enable full cross-platform support."
Thank you all again!
Maybe you need a 'white-space: pre-wrap;' (or 'pre;') rule on the DIV, but if there is no line break then this won't work.