WaterMark Text is not coming at proper position for all types of resolutions

Support
,
1

I am using 3 types of video which have the following hight and width.
1)480 x 854
2)1080 x 1920.
3)270 x 480

We are using the following code for the watermark filter.

private Task CreateTextFilter()
{
var textFilter = new TextFilter()
{
Text = Constants.watermarkString,
X = Convert.ToString(Constants.X),
Y = Convert.ToString(Constants.Y)
};
textFilter.FontColor = “white”;
textFilter.FontSize = 18;
textFilter.Font = TextFilterFont.ROBOTO;
return _bitmovinApi.Encoding.Filters.Text.CreateAsync(textFilter);

    }

I am getting the X and Y Positions by below method.

public static void GetOverlayPosition(int curWidth, int curHeight)
    {
        var yPercent = 0.02; // Same for all
        var xPercent = 0.0;
        var imagePercent = 0.0;

        // These values are derived by trial and error to get the image to display on right top of the video
        switch (curWidth)
        {
            case 3840:
                xPercent = 0.80;
                imagePercent = 0.5;
                break;
            case 1920:
                xPercent = 0.80;
                imagePercent = 0.5;
                break;
            case 1280:
                xPercent = 0.77;
                imagePercent = 0.4;
                break;
            case 960:
            case 854:
                xPercent = 0.77;
                imagePercent = 0.3;
                break;
            case 640:
                xPercent = 0.77;
                imagePercent = 0.2;
                break;
            case 360:
                xPercent = 0.60;
                imagePercent = 0.15;
                break;
        }
        // image placement position calculation:
        var x = $"{Math.Round(xPercent * curWidth)}";
        var y = $"{Math.Round(yPercent * curHeight)}";
        Constants.X = Convert.ToInt32(x) - 28;
        Constants.Y =  Convert.ToInt32(y);


        // image width and height calculation: Actual image resolution: 610x75
        // Need reduction in this for displaying this in different resolutions, decrease by a certain percentage:
        var imageWidth = $"{Math.Round(610 * imagePercent)}"; // videoWidth 854, 960: 183, 1280: 244, 1920: 354, 640: 122, 360: 91.5
        var imageHeight = $"{Math.Round(75 * imagePercent)}"; // videoHeight 854, 960: 22.5, 1280: 30, 1920: 37.5, 640: 15, 360: 11.25
                                                              //  var overlayPosition = new Rectangle() { Left = x, Top = y, Width = imageWidth, Height = imageHeight };
                                                              //  return overlayPosition;
    }

WaterMark Posotions and Font is different for different resolutions.

    1. 480 x 854

image
image777×442 18.9 KB

2)1080 x 1920.
Here font becomes very small

image
image785×442 8.83 KB

  1. 270 x 480
    Here complete position has changed its coming Top Right instead of Top Left.
    image
    image777×436 39.7 KB

Urgent reply will be appreciated as this is production issue

2

Hi, @rajeshrai0512

Thank you for reaching out to our Bitmovin Community.

I checked your question. The reason the font size appears small when the input is width x height = 1920 x 1080 is that the fontSize = 18 is relatively small against the input resolution. To solve this, you can use the fontSizeExpression API parameter in TextFilter instead of using fontSize to use a consistent font size relative to the input resolution. For example, setting FontSizeExpression = "w / 64" will ensure that the font size ratio to the input width remains constant regardless of the input resolution.

private Task<TextFilter> CreateTextFilter()
{
    var textFilter = new TextFilter()
    { 
        Text = "Sample Text",
        X = Convert.ToString(Constants.X),
        Y = Convert.ToString(Constants.Y),
        // FontSize = 18,
        FontSizeExpression = "w / 64"
    };
    return _bitmovinApi.Encoding.Filters.Text.CreateAsync(textFilter);
}

Additionally, the issue of the position being incorrect when the input is width x height = 480 x 270 seems to be caused by a bug in the GetOverlayPosition() function you shared. This function doesn’t have any switch-case condition for a width:480. As a result, the default values are applied, which leads to the following calculations:

Constants.X = -28
Constants.Y = 5

This configuration results in the text being inserted from the -28th pixel, likely causing it to be placed in the Top Left. To prevent this, you can add the appropriate switch-case condition for width = 480 to ensure the text is inserted at the intended position.

Hope this information is helpful. If you have any further questions, please feel free to let us know. Thank you.

Best Regards,
Kazuhide