Poptartica 12 Posted March 8, 2015 Posted March 8, 2015 Hey all. I looked around but couldn't really find anything related to this specifically: When I play a file containing Subtitles in the web browser player, they always show with a black backdrop. Is there any way to remove this backdrop? I have had multiple people confirm that it happens when viewing through their browsers. If that's not supposed to happen, why might it happen and has anyone been able to fix this? The PC running the MediaBrowserServer is an Ubuntu 14.04.2 LTS system. For reference, here's a sample MediaInfo for a file which exhibits this behavior when played (quality setting: Direct) through the browser: General Format : Matroska Format version : Version 2 File size : 322 MiB Duration : 23mn 39s Overall bit rate : 1 899 Kbps Attachements : AppleGaramond.ttf / AppleGaramond-Light.ttf / arial.ttf / BISONPRR.TTF / CronosPro-Capt.otf / ElicitSSK-Bold.ttf / HATTEN.TTF / PIXEARG.TTF / TOARUmincho.ttf Video ID : 1 Format : AVC Format/Info : Advanced Video Codec Format profile : High@L4.1 Format settings, CABAC : Yes Format settings, ReFrames : 9 frames Codec ID : V_MPEG4/ISO/AVC Duration : 23mn 39s Width : 1 280 pixels Height : 720 pixels Display aspect ratio : 16:9 Frame rate mode : Constant Frame rate : 23.976 fps Color space : YUV Chroma subsampling : 4:2:0 Bit depth : 8 bits Scan type : Progressive Title : H.264 720p HDTV Writing library : x264 core 114 r1924+495 ccd7045 Encoding settings : cabac=1 / ref=9 / deblock=1:1:1 / analyse=0x3:0x133 / me=umh / subme=10 / psy=1 / fade_compensate=0.80 / psy_rd=0.40:0.00 / mixed_ref=1 / me_range=24 / chroma_me=1 / trellis=2 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=0 / chroma_qp_offset=-2 / threads=6 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / constrained_intra=0 / fgo=5 / bframes=10 / b_pyramid=2 / b_adapt=2 / b_bias=0 / direct=3 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=23 / scenecut=40 / intra_refresh=0 / rc_lookahead=60 / rc=crf / mbtree=1 / crf=18.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:0.60 Language : Japanese Default : No Forced : No Audio ID : 2 Format : AAC Format/Info : Advanced Audio Codec Format profile : LC Codec ID : A_AAC Duration : 23mn 39s Channel(s) : 2 channels Channel positions : Front: L R Sampling rate : 48.0 KHz Compression mode : Lossy Title : AAC 2.0 Language : Japanese Default : No Forced : No Text ID : 3 Format : ASS Codec ID : S_TEXT/ASS Codec ID/Info : Advanced Sub Station Alpha Compression mode : Lossless Title : Styled Subtitles Language : English Default : Yes Forced : No Menu 00:00:00.000 : en:Prologue 00:01:03.564 : en:Part A 00:10:32.966 : en:Opening 00:12:02.889 : en:Part B 00:22:09.870 : en:Ending Any help would be appreciated. Thanks!
Luke 38827 Posted March 8, 2015 Posted March 8, 2015 it's the browser's default presentation for subtitles. we have not gotten around to providing customization for that. 2
Poptartica 12 Posted March 9, 2015 Author Posted March 9, 2015 it's the browser's default presentation for subtitles. we have not gotten around to providing customization for that. Ah, I see! Thanks for clearing that up Is this something that could be altered through the custom CSS, or would you happen to know offhand where I might be able to find that so that I can change it myself in the server's files?
Solution TedA 36 Posted March 9, 2015 Solution Posted March 9, 2015 Ah, I see! Thanks for clearing that up Is this something that could be altered through the custom CSS, or would you happen to know offhand where I might be able to find that so that I can change it myself in the server's files? You got me curious about styling these in css... It turns out you can! https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video The short version: If your are using a modern browser you should be able to style these by declaring a rule on the ::cue selector. For example: ::cue { color: blue; background: white; } You can apparently change: color opacity text-decoration text-shadow background outline font white-space Doing that in your custom CSS should allow you to modify these as you please. YMMV depending on your browser. 2
TedA 36 Posted March 9, 2015 Posted March 9, 2015 Also, I think this is the wrong sub-forum for web browser stuff?
AdrianW 1054 Posted March 9, 2015 Posted March 9, 2015 FYI - If your'e using a browser on your local network on a PC to play your videos, it would be worth checking out the MPC-HC Remote which enables the browser to open MPC-HC which will directly play the video (with nicely styled subtitles).
Poptartica 12 Posted March 9, 2015 Author Posted March 9, 2015 You got me curious about styling these in css... It turns out you can! https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video The short version: If your are using a modern browser you should be able to style these by declaring a rule on the ::cue selector. For example: ::cue { color: blue; background: white; } You can apparently change: color opacity text-decoration text-shadow background outline font white-space Doing that in your custom CSS should allow you to modify these as you please. YMMV depending on your browser. That's awesome, Ted! I really appreciate the help - it worked perfectly! I just made some very basic looking subtitles using: ::cue { background-color: transparent; text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); } Bookmarked that page for reference later in case anything else could use a change. Also, I think this is the wrong sub-forum for web browser stuff? It's quite possible.. I was unsure where to ask, if it's in the wrong sub-forum please excuse my confusion If any mods see and feel it would fit better moved elsewhere that would be great. FYI - If your'e using a browser on your local network on a PC to play your videos, it would be worth checking out the MPC-HC Remote which enables the browser to open MPC-HC which will directly play the video (with nicely styled subtitles). Thanks Adrian, I did not know that! I'll keep that in mind for my own viewing in the future!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now