HTML5 videos are pixelated

[voyadexon]

This problem never bothered me, because I used the Flash Player, but not that I have to use the HTML5 Player because of 60FPS, I decided to open a thread here. HTML5 Videos are always very pixelated, as you can clearly see in the screenshot below

I'm using Chrome Stable 38.0.2125.111 m. This applies to all player resolutions. I already disabled hardware acceleration but that doesn't seem to work.

[jasonycw]

I notice that too, it seems that the Flash player have some sort of AA and when using HTML5 player, some sharp contrast edges always have the stair effect which is more noticeable while playing the video instead of screenshot.

It is only HTML5 player problem.

[voyadexon]

I noticed another thing. The HTML5 videos are very dark. I switched between Flash and HTML5, and the Flash player was notably better.

[YePpHa]

The rendering of the video is handled by the browser when using the HTML5 player so I would think that the issue is with the browser, but I can try to look into this.

[Yonezpt]

@jasonycw That is the result of green screen edges, Linus is in front of a green screen which is later replaced via software by the white/shadow background you see in the picture. The rough edges are the result of a not-so-good edge cleaning.

@Voyadexon Could you try the same videos with YTC disabled and let us know if there is any difference? I doubt YTC is causing this so if the problem remains with YTC disabled then we already know that it isn't the extension's fault.

[voyadexon]

@Yonezpt I double checked now. Some time ago it didn't occurr with YTC disabled, but now it persists. I will try to change some settings in my chrome. Thanks!

[jasonycw]

@Yonezpt yes, that may "increase the degree of problem" but the rough edges also occur on non-green screen videos.

Those straight edges moving line always have tearing while moving, cannot find a better screenshot to demonstrate that but this is one

The rough edges is much more noticeable when the video is playing since it is very similar to 3D game with no AA. If the contrast of two side of the edge is higher, it will be even more noticeable.

[YePpHa]

I just thought that the rough edges could be a side effect of the technique that the browser is using to scale down the video when using a higher quality than the player size. So maybe the problem could be minimized if the corresponding quality is chosen to the player size.

[YePpHa]

I just tried to make a comparison. I chose the video quality 720p.

For the player size 720p (1280x720) it looks like this

For the player size 585p (1040x585) it looks like this

You can clearly see that the one where the browser scales the video down to 585p has these rough edges.

[YePpHa]

Did a quick Google search and it seems like this only happens with the MP4 format and not the WebM:

Update: Interestingly, this seems to be a problem with what codec a video is being played on. I tried the two following videos which played through two different encoders: Image 1, Image 2. The problem occurs in the first one and not the second. According to the encoding options here, I have a problem playing H.264/AVC videos (which has an itag of 248; mp4) and no problem playing VP8 videos (which has an itag of 137; WebM) through the YouTube HTML5 player.

Source: http://superuser.com/questions/788270/jagged-edges-on-hd-html5-videos

[Yonezpt]

So that is why I wasn't able to replicate the issue, the codec/stream that develops this problem was not being selected for me. Then it is confirmed that the issue is not related to YTC.

EDIT: It's strange, though, because this looks exactly like when you watch flash videos with hardware acceleration turned off and the video native resolution is higher or lower than your screen size.

[YePpHa]

Yeah, it seems to be a browser issue and not related to YouTube Center. Though it would be nice if a solution could be found. Some have suggested turning the hardware acceleration on or off, but I'm not sure if it helps.

[Zarggg]

I've tested with hardware accelerated both on and off, and the "pixellation" happens regardless. I agree that it's either a browser or codec issue.

[jasonycw]

@YePpHa so do you suggest that using 720p 60fps instead of 1080p 60fps when using 720p HTML5 player?

I thought down-scaling 1080p video to 720p size should make it less edgy.

[voyadexon]

HTML5 videos are not resizing correctly, that's why the jagged edges appear. Unfortunately, my monitor is too small for me to use the 720p player, so I use the 80% one. It seems like there isn't any solution to it.

[Yonezpt]

@Voyadexon Could you try replicating the same problems with Firefox? No need to install YTC in firefox just to enable the html5 player, you can do so by opening this link in firefox: https://www.youtube.com/html5

And clicking "Request the HTML5 player".

I ask this because I am assuming that if the problem still occurs with Firefox then it is most likely a system issue and not browser specific because youtube shouldn't serve the same streams to Firefox like the ones it serves to Chrome. If the problem doesn't occur with Firefox then it is most likely a problem with the Chrome specific codec/decoder/resampling.

Seems like this issue has been going on for quite some time now and it really is a problem with the Chrome browser: https://code.google.com/p/chromium/issues/detail?id=351458

From the few user reports found in that issue thread, disabling hardware acceleration in Chrome might reduce the aliasing problem, so that's one thing you can try. Let us know if it made any difference.

[voyadexon]

@Yonezpt I already disabled hardware acceleration, but it didn't work. I also disabled hardware accelerated video decoding, but it didn't help either.

Just to make sure I also tried using HTML5 in Firefox and it worked without any problems.

[Yonezpt]

Could you try this possible solution then? http://linustechtips.com/main/topic/175857-youtube-video-problems/

I have been looking everywhere for some way to help you out, but I am afraid that this is my last suggestion. I suspect that his solution only works for the flash player, but there's no harm in trying.

EDIT: I just remembered one last thing that you can try if you haven't already, go to chrome://flags and enable Override software rendering list if it isn't already enabled.

[voyadexon]

Yep, this hasn't any effect on the HTML5 player. Maybe Google will address this some day. Well, I guess I'll have to watch pixelated videos then.

[Yonezpt]

@Voyadexon Did you also try what I added in my edit note?

[voyadexon]

@Yonezpt yes I did. I already tried this yesterday but it also had no effect.

[mzso]

I doubt this can be a bug of anything other than whatever Chrome uses for decoding and rendering. You guys should report it to the Chrome devs.

@jasonycw commented on 2014. okt. 31. 13:04 CET:

I notice that too, it seems that the Flash player have some sort of AA and when using HTML5 player, some sharp contrast edges always have the stair effect which is more noticeable while playing the video instead of screenshot.

It's not actually AA. It's upscaling. The color information is stored at half or quarter of the resolution of the luminosity. It's wretched primitive form of "compression", but it's universal. You get the artifacts when they're using a primitive algorithm to upscale. (Maybe as a fallback?)

[hoboX10]

Is there some way to tell youtube the browser prefers the webm video rather than the mp4?

[DAOWAce]

Oh, so this is the reason for this..

Yeah, HTML5 videos (in Chrome) look pretty bad. Strangely, for me they're brighter than flash, not darker. I figured fullscreening would fix it (since they're 1080p resized to 720p in the window), but it didn't.

Good thing I only watch Youtube HTML5 videos when they're 60FPS; shame that they're becoming the norm for the gaming channels I watch on a daily basis. Hopefully one of the resolutions from the links solves it, as it's really damned ugly.

[mzso]

@DAOWAce commented on 2014. nov. 4. 16:01 CET:

Oh, so this is the reason for this..

Yeah, HTML5 videos (in Chrome) look pretty bad. Strangely, for me they're brighter than flash, not darker. I figured fullscreening would fix it (since they're 1080p resized to 720p in the window), but it didn't.

That's the norm anyway. If you have an Nvidia card you probably want to do this: https://wiki.videolan.org/VSG:Video:Color_nVidia (Maybe other drivers have similar settings/issues.)

@Voyadexon commented on 2014. okt. 31. 15:21 CET:

I noticed another thing. The HTML5 videos are very dark. I switched between Flash and HTML5, and the Flash player was notably better.

That's unusual, when then the videos are not rendered properly they get pale/light. Maybe it's the HTML5 one that's rendered properly on your system and the flash one isn't. Can't tell without screenshots.

[ValkyriePC]

Hey guys, I found a solution and made a tutorial / demonstration about this.

https://www.youtube.com/watch?v=djHKe-7WxXA

[iPugx]

still having this issue with a gtx 970 sli