Chrome - fullscreen subtitles are not in right position. (video-js)

[arnavion]

Chrome - fullscreen subtitles are not in right position. (video-js)

[Dador]

What is your chrome version?

Fullscreen on your link works fine for me.
Chrome 39.0.2171.95 m (last stable)

Screenshot:

[xtsss]

ok, i checked it, it happens when you set default zoom page for example 125%, zoom page to 125% and you will see that default is ok but fs is not ok, maybe it is also in firefox cause in firefox i had it without zoom.

[Arnavion]

This is a bug in videojs-ass. On going fullscreen, it tells the renderer to resize to (screen.width, screen.height). This does not take browser zoom into account.

Eg: If I have a 1920x1200 monitor and the browser is zoomed to 200%, the fullscreen video element (iframe) is 960x600. However screen.width and screen.height continue to be 1920x1200 since they are measured in device pixels, not viewport pixels.

Instead of using screen.width and screen.height, it should use some method of getting the player's width and height. (It did not seem that player.width() and player.height() report it because they continued to give the pre-fullscreen dimensions. Not sure whether videojs can give that information.)

[Arnavion]

(DefaultRenderer also has this bug, but videojs-ass doesn't use it so it's not relevant here.)

[Denoder]

in reply to this, the only way i was able to fix this problem was to make the player responsive and have libass.css size up to the responsiveness of the player by making the wrapper wrap around the full layer of the player.

IT will work when you zoom out (to a certain degree) and will resize on phones. (subtitles will be all the way at the bottom when in portrait view)

[Arnavion]

@ChristianMcQuilkin Can you elaborate? Do you mean you put the video element inside the .libjass-wrapper wrapper, or the .libjass-subs wrapper? How do you call renderer.resize when going in and out of fullscreen?

[Denoder]

I'm basing this off of video-js-ass
What i did was made videojs and vjs-tech relative and have an auto height.

Then i'd have libjass wrapper have a
width: 100%; height: 100% !important; top: 0;

i would also have the libjass-subs wrap around too.

Just take a look here: and look for the differences:
http://anime.genenx.squidix.me/assets/css/libjass.css

Go here for the test:
http://anime.genenx.squidix.me/shows/39-death-parade/seasons/1/episodes/1

[Arnavion]

I see. That is not correct, unfortunately. Setting width and height to 100% will break with full-screen letterboxed video. For example on your test page, notice how the relative position of the subs is wrong:

Regular:

Full-screen - the subs are outside the video, and no margins are being applied:

The reason the renderer works with absolute sizes is also because it is essential for calculating widths, margins, zoom, etc. For example, on your page, entering and exiting fullscreen results in an incorrect width calculation - the wrapper and subs are too wide, causing the subs to shift right.

Instead of hacking the renderer's size calculation, you should endeavor to call it with the correct size. For DefaultRenderer, a simple fix was to delay the resize with setTimeout after the actual fullscreenChange event, so that the browser reported the correct full-screen pixel size of the video element. You can probably do the same with videojs.