4

It doesn't matter if I play as a local file or hosted, but it seems that chrome is outputting pure video in a fuzzy way. I have tried turning off all extensions and removing hardware acceleration and it doesn't change anything.

Chrome version: Version 59.0.3071.115 (Official Build) (64-bit) OS: Windows 10 Video Source: MP4 using H.624 codec with maximum quality

Take a look at the fonts, they are clearly blurry

Community
  • 1
  • 1
Daniel Vianna
  • 581
  • 6
  • 23
  • 1
    This is not related to **programming**. You should ask about software issues at **https://superuser.com** (use your SO account there). – VC.One Jul 18 '17 at 23:34
  • Do you have a HiDPI screen? Do you have multiple monitors at different resolutions or pixel density? Each of those could cause Chrome to misinterpret your screen resolution. – Moshe Katz Jul 18 '17 at 23:34
  • I am using a laptop with another monitor. But I turned off the second monitor and same thing happened. I also replicated the issue on a second computer – Daniel Vianna Jul 19 '17 at 16:30
  • For VC.One - well this problem make the video playback look fuzzy in any website – Daniel Vianna Jul 19 '17 at 16:31
  • Could you use the inspector to check if the element in Chrome is 1:1 in pixel size relative to the video source. Resampling, as here, usually only occur when the video has to be scaled to a different size for whatever reason (ie. things like a unexpected padding/margin etc.). –  Jul 19 '17 at 22:04
  • Yes it is. Check the video yourself: http://sandbox.cast-soft.com/wp-content/uploads/2017/04/pipe-handbreak2.mp4 , it happens even if you pulled the direct video link with no html , I just replicated the same issue on 4 computers now – Daniel Vianna Jul 20 '17 at 03:41

2 Answers2

4

I found the solution. In order to H264 encode the file properly the height and width of the original footage or screen capture need to be a multiple of 8 and 16.

Recommended width and height for videos with 4:3 aspect ratios

  • 960x720
  • 832x624
  • 768x576
  • 704x528
  • 640x480
  • 576x432
  • 512x384
  • 448x336
  • 384x288
  • 320x240
  • 256x192

Recommended width and height for videos with 16:9 aspect ratios

  • 1920x1080
  • 1600x900
  • 1440x810
  • 1280x720
  • 1024x576
  • 768x432
  • 512x288
  • 256x144
Daniel Vianna
  • 581
  • 6
  • 23
  • Daniel, can you explain further? Width must be a multiple of 8 and height of 16? Must they be 4:3 or 16:9? Do you have a source supporting these recommended dimensions, or are they from personal testing? I've encountered the same issue, so I'm trying to nail down the best solution. – crenshaw-dev Aug 30 '17 at 21:38
  • Actually, found what I think is your source here: https://stackoverflow.com/questions/13016405/html5-video-is-blurry-and-low-contrast-only-in-my-installation-of-chrome – crenshaw-dev Aug 30 '17 at 21:44
  • 1
    I explained in my post below – Daniel Vianna Sep 01 '17 at 22:24
1

Both width and height should be multiple of 16. A multiple of 16 means that it can be divided with no fraction, so a perfect division.

In the case of 768x576:

if you divide 768 by 16 = 48

If you divide 576 by 16 = 36

both dimensions are can be perfectly divided

One case for example that doesn't work 608x456:

608 / 16 = 38

456 / 16 = 28.5 - this one you have a remainder of 0.5

About the aspect ratio, the first column with sizes (when starts at 960x720 and ends on 256x192) is related to the 4:3 aspect ratio, which means these sizes are all proportional to the 4:3 aspect ratio. The same thing happens for 16:9. I put two lines to separate the two sets of bullet points and now might be clear what they actually mean.

My source comes from: https://sibsoft.net/xvideosharing/info_video_dimensions.html

I don't know why this 16 multiple is required, but talking with a software engineer I know, he thinks that that the way H264 compresses the image is probably related to how the algorithm stores the data to compress.

I have been doing videos of a desktop software my company sells, and placing to screencapture on their website. I'm using camtasia for screencapture and noticed that in order to have a super sharp final video you need to resize the software UI you want to capture the same exact size you want to render, so you need to avoid at all costs to re-scale the image inside premiere, even if you are shrinking something high res.

So for ex. let's say I'm selling something similar to microsoft word, I make a mockup in photoshop to be 1280x720, then I place the screen on top of that rectangle and resize the MS word doc to be very close to that resolution, then I configure camtasia to also capture in a fixed size of 1280x720, then I export with maximum output from premiere and finally I use handbrake with the same 1280x720 size to encode it, the result is amazing (super sharp and small filesize). Another tip I got is to use retina screen when capturing the video, as you will have double pixel information because in Retina the pixels are even smaller.

I also don't know how that would play with the original recorded footage if its coming from a camera,but in theory every-time you change aspect ration and resolution you lose quality.

Daniel Vianna
  • 581
  • 6
  • 23