HTML Text seems grainy?

Shotstack API
1

I created a video using the php sdk, using the real estate demo as a base.

However I’m having trouble with the HTML text rendering in the video.

The HTML text seems grainy and low resolution compared to the example videos being generated on that page.

I tried using the same attributes for the HtmlAssets (width/height, font, etc), but it did not render the same.

Here are screenshots of the grainy html:

Screen Shot 2022-07-13 at 7.22.23 AM
Screen Shot 2022-07-13 at 7.22.23 AM1920×940 101 KB

This is sdk code:

(new Track())
            ->setClips([
                (new Clip())
                    ->setAsset(
                        (new HtmlAsset())
                            ->setHtml("<div>{$spaced_address}</div>")
                            ->setWidth(340)
                            ->setHeight(200)
                            ->setPosition('left')
                            ->setCss('div { font-family: "Manrope ExtraBold"; color: #f0c20c; font-size: 15px; text-align: left; line-height: 78;}')
                    )
                    ->setOffset((new Offset())->setX(0.025)->setY(0.2))
                    ->setTransition((new Transition())->setIn('slideRight')->setOut('slideLeft'))
                    ->setStart(1.2)
                    ->setLength(4.2)
                    ->setPosition('left'),
                (new Clip())
                    ->setAsset(
                        (new HtmlAsset())
                            ->setHtml("<p>{$this->listing->city_name}, {$this->listing->state} {$this->listing->zip_code}</p>")
                            ->setWidth(500)
                            ->setHeight(200)
                            ->setPosition('left')
                            ->setCss('p { font-family: "Manrope Light"; color: #ffffff; font-size: 12px; text-align: left; line-height: 78;}')
                    )
                    ->setOffset((new Offset())->setX(0.025)->setY(0.05))
                    ->setTransition((new Transition())->setIn('slideRight')->setOut('slideLeft'))
                    ->setStart(1.3)
                    ->setLength(3.9)
                    ->setPosition('left'),
            ]);
2

Let me see if I can reproduce. Do you happen to have the uuid of one of your rendered videos? That’ll make debugging go a lot faster!

3

Thank you dazzatron.

Sure. It’s on the staging environment.

15367b1a-848a-4675-82dc-cc63c1d0a349

4

I found the issue. The PHP SDK automatically sets the fit property of all assets to crop. This results in the contents being cropped to the dimensions of your html container. The fix is to set setCrop('none') on all your html assets.

image

As your css font-size property was set to 15px this led the your text being stretched and becoming grainy. If we use the setCrop('none') method we can see how big the font-size actually is:
image

Now if we set the font-size property to 46px it looks as follows:
image

It’ll require some offset adjusting but the graininess is now gone.

I’ve added a ticket to update the PHP SDK to act more like straight JSON so it’s not required to set this property but until that time I suggest you add setCrop('none') to all your html assets.

5

thank you! That is a huge help!

6

Just to confirm, one actually has to call ->setFit(‘none’) on the Clip class for it to work as expected.

7

Yes, you need to explicitly set it using that call.