The short video SDK provides a variety of features, product-level interaction, and an abundant video material library that contains music videos (MVs), stickers, bubbles, and word art. The short video SDK also allows you to create custom effects to meet the material requirements in different scenarios and industries. This topic describes how to configure word art.

Overview

Word art is an effect based on subtitles. A word art resource package folder contains a word art configuration file named config.json and some picture materials. You can use the editing API operation provided by the short video SDK to apply a word art effect by specifying the folder of a word art resource package.

A complete word art resource package contains the following parts:
  • config.json: the word art configuration file. This file is required. For more information about how to configure the configuration file, see Parameters in config.json.
  • icon.png: the word art thumbnail. This file is optional.
  • lieheng.png: the word art texture. This file is optional. You can set the word art effect based on this texture if corresponding configurations are made in the configuration file.

Configure the word art resource package

The following table describes the parameters in the config.json file.
Table 1. Parameters in config.json
ParameterTypeRequiredDescription
versionStringYesThe version number. Default value: 1.
colorStringYesThe font color. Format: #AARRGGBB or #RRGGBB.
textureStringNoThe word art texture. Only the JPG and PNG formats are supported. This file must be placed in the same folder as config.json. The texture for each word is the same. The part where the text and the texture overlap is applied.
outline1JSONObjectYesThe first-layer outline. For more information about the attributes of outline1, see Outline attributes.
outline2JSONObjectNoThe second-layer outline. This outline has the same data structure as outline1. For more information about the attributes of outline2, see Outline attributes.
The following table describes the attributes of outline1 and outline2.
Table 2. Outline attributes
AttributeTypeRequiredDescription
typeStringYesThe type of the font. The default value is normal, which means that the system font is used.
dataJSONArrayYesThe color and width of an outline. For more information, see Sub-attributes of the data attribute. If you set the type attribute to normal, a maximum of three color configurations can be made for the data attribute. If more than three color configurations exist, only the first three color configurations take effect.
The following table describes the sub-attributes of the data attribute.
Table 3. Sub-attributes of the data attribute
Sub-attributeTypeRequiredDescription
colorStringYesThe outline color. Format: #AARRGGBB or #RRGGBB.
widthfloatYesThe outline width. Valid values: 0 to 64. The width of the next data attribute must be greater than this value.
Note For all outlines, the width of a data attribute must be greater than the width of the previous data attribute.
Example: width of data5 > width of data4 > width of data3 > width of data2 > width of data1. See the following sample code. 
{    
  "outline1": {
    "type": "normal",
    "data":[   // data1
      {
        "color": "#5350DD",
        "width": 2    
      },
      {    // data2
        "color": "#B5FAA7",
        "width": 4  
      }
    ]
  },
  "outline2": {
    "type": "normal",
    "data":[ 
      {    // data3
        "color": "#6E58F8",
        "width": 8
      },
      {    // data4
        "color": "#69F88C",
        "width": 10
      },
      {    // data5
        "color": "#FA55D8",
        "width": 12
      }
    ]
  }
}

Configuration example

The following word art is used in this example. To download the demo package, click Sample demo.zip. Sample word art
  • The folder structure of the demo package:

    ├── config.json

    ├── icon.png

    └── lieheng.png

  • The following code shows how config.json is configured:
    {
  "version": 1,
  "color":"#000000",
  "texture": "lieheng.png",
  "outline1": {
    "type": "normal",
    "data":[
      {
        "color": "#ffffff",
        "width": 8
      }
    ]
  },
  "outline2": {
    "type": "normal",
    "data":[
      {
        "color": "#000000",
        "width": 15
      }
    ]
  }
}

Use word art in the short video SDK

You can use word art only when you edit videos.