0
I managed to create a sharp video after doing a lot of research. However, now my problem is when scaling down in the browser. I am trying to do something similar to this:https://framer.com/features/design/
I contacted some folks from Framer and they mentioned that they used a big retina screen (higher pixel density) and ScreenFlow for capture and export with no additional compression software. I noticed that ScreenFlow has an option to use an algorithm that maintains the sharpness when the video is scaled down.
My workflow is all in windows, considering that the application that I am using is windows too.
This is my workflow: Camtasia captures with fixed size of 960x720 ( I read that H264 footage should have a size that is multiple of 8 and 16 to avoid pixelation). Then import and edit in Adobe Premiere, export with H264 codec with maximum output and quality. Import into Handbrake, chose HQ1080p30 preset, modify the video for constant framerate, and constant quality of 15, an output is Mp4 optimized for the web and NO changes in the size.
When my video plays on the specific size of 960x720 it's perfect. However, when things start scaling down I notice the font gets fuzzy, which is bad for a responsive website.
Note: Premiere, Camtasia, and Handbrake don't have the option to use an algorithm that maintains sharpness when the size is scaled down, or at least I could not find it.
I put a small HTML code in code pen so you can visualize this problem::https://codepen.io/danielvianna/pen/xrvzzJ
Note: just change the sizes to (multiples of 8 and 16)
- 832x624
- 768x576
- 704x528
Daniel Vianna
Posted 2017-07-21T16:13:11.403
Reputation: 111
"Premiere, Camtasia, and Handbrake don't have the option to use an algorithm that maintains sharpness" none of this is relevant unless you are actually transcoding for the specific size for each client at display time. As far as I can tell, you aren't. You are baking the resolution into the video at design time. Your problem comes with video scaling client-side. Usually assets are swapped based on media queries. Video, I suspect is going to require something different. – Yorik – 2017-07-21T17:36:51.990
I am not a video expert and it seems that you know more than me so what would do in my case? – Daniel Vianna – 2017-07-21T19:29:54.073
That's the thing: I don't know to make an answer. A "css media query" may work, but it is unclear to me if this means the video will restart when you resize the browser. Media queries are a way to load different assets based on circumstances. This means multiple versions sized appropriately for the sizing. Youtube does this BTW with their "quality" choices: you might see the low-res one in some circumstance, but if you go full-screen on a 1080p monitor, you might see the larger version. Their player handles this for you. – Yorik – 2017-07-21T20:25:20.417
The problem you are responding to is from "fast" (fast usually means less precise quality) resizing algorithms that video players and/or browsers use. Some players are going to have better scaling methods, but it will depend on the flash player or any in-built functionality of the browser. – Yorik – 2017-07-21T20:26:29.010