Tutoriais
Adicionar legendas
1. Exemplo de legenda inline
{
"type": "subtitle",
"start": 0,
"duration": 6,
"words": [
{ "word": "hello", "punctuated_word": "Hello", "start": 0, "end": 0.4 },
{ "word": "world", "punctuated_word": "world!", "start": 0.4, "end": 0.9 }
],
"config": {
"position": "bottom",
"fontSize": 58,
"textColor": "#ffffff",
"highlightColor": "#22d3ee",
"backgroundColor": "rgba(0,0,0,0.45)"
}
}2. Exemplo de legenda baseada em asset
{
"assets": {
"subtitles": [
{
"id": "sub-main",
"words": [
{ "word": "hello", "punctuated_word": "Hello", "start": 0, "end": 0.4 },
{ "word": "world", "punctuated_word": "world!", "start": 0.4, "end": 0.9 }
]
}
]
}
}Use assim:
{
"type": "subtitle",
"start": 0,
"duration": 6,
"words": { "$ref": "sub-main" },
"config": {
"position": "bottom",
"fontSize": 58,
"highlightColor": "#22d3ee"
}
}3. JSON remoto de legendas
{
"type": "subtitle",
"start": 0,
"duration": 6,
"words": {
"src": "https://example.com/subtitle.json"
}
}4. Dicas práticas
- Alinhe a duração da legenda com o trecho falado
- Mantenha padding inferior suficiente para áreas seguras em mobile
- Prefira
$refquando as mesmas legendas forem reutilizadas em vários templates ou exemplos
5. Documentos relacionados
- Elemento de legenda: Elemento de subtítulo
- Coleção de exemplos: Exemplos