Estilizando legendas com a Transloadit: 3 formas criativas

Joseph Grabski

Líder de conteúdo · Rochester, Reino Unido · Mostrar biografia

Um estilo de legenda marcante é apenas uma das muitas formas com que os serviços de streaming de vídeo podem definir sua marca. Muitas vezes, basta um olhar para saber se um vídeo vem da Netflix ou do YouTube, só pelo design das legendas. O objetivo do post de hoje é ajudar você a criar uma identidade de marca única para o seu conteúdo, revelando os segredos da estilização de legendas com a ajuda da Transloadit.

Nosso Template base

Antes de conhecermos as opções de estilo, vamos ver o Template base que vamos usar para controlar o fluxo dos nossos arquivos.

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "video_filtered": {
      "use": ":original",
      "robot": "/file/filter",
      "result": true,
      "accepts": [["${file.mime}", "regex", "video"]],
      "error_on_decline": false
    },
    "subtitle_filtered": {
      "use": ":original",
      "robot": "/file/filter",
      "result": true,
      "accepts": [["${file.mime}", "regex", "application/x-subrip"]],
      "error_on_decline": false
    }
  }
}

Os dois Steps de /file/filter aqui vão selecionar os arquivos de vídeo e de legenda dentre os arquivos que enviamos para a Assembly e nos permitir acessá-los diretamente e repassá-los aos Steps seguintes de /video/subtitle.

No restante do post, cada Step que veremos será adicionado a este Template básico.

Com isso resolvido, é hora de soltar a criatividade! 🎨

1. Legendas da Netflix

Primeiro, as legendas da Netflix, com seu estilo característico e minimalista. O Step mostrado abaixo vai:

• Definir o border_style como shadow
• Deixar a cor principal do texto branca
• Deixar a cor da sombra preta e levemente transparente
• Definir a fonte como Consolas

  "netflix": {
    "robot": "/video/subtitle",
    "use": {
      "steps": [
        {
          "name": "video_filtered",
          "as": "video"
        },
        {
          "name": "subtitle_filtered",
          "as": "subtitles"
        }
      ]
    },
    "preset": "empty",
    "ffmpeg_stack": "v5.0.0",
    "subtitles_type": "burned",
    "font": "Consolas",
    "border_color": "80000000",
    "font_color": "FFFFFF",
    "border_style": "shadow"
  }

Ficou bem elegante, não é?

2. Legendas do YouTube

Agora, vamos ao estilo de legenda em bloco do YouTube. Para chegar a esse efeito, precisamos:

• Definir a fonte como Roboto
• Definir o border_style como box
• Deixar a cor da fonte branca
• Deixar a cor da caixa preta e levemente transparente

  "youtube": {
    "robot": "/video/subtitle",
    "use": {
      "steps": [
        {
          "name": "video_filtered",
          "as": "video"
        },
        {
          "name": "subtitle_filtered",
          "as": "subtitles"
        }
      ]
    },
    "preset": "empty",
    "ffmpeg_stack": "v5.0.0",
    "subtitles_type": "burned",
    "font": "Roboto",
    "border_color": "40000000",
    "font_color": "FFFFFF",
    "border_style": "box"
  }

Isso deve parecer bem familiar!

3. Legendas vintage

Nosso último estilo é uma verdadeira viagem ao passado: legendas vintage, inspiradas no VHS. Precisamos configurar nossos parâmetros da seguinte forma:

• Definir a fonte como Arial
• Definir o border_style como outline
• Definir a cor do contorno como preta
• Definir a cor do texto naquele tom característico de amarelo

  "vintage": {
    "robot": "/video/subtitle",
    "use": {
      "steps": [
        {
          "name": "video_filtered",
          "as": "video"
        },
        {
          "name": "subtitle_filtered",
          "as": "subtitles"
        }
      ]
    },
    "preset": "empty",
    "ffmpeg_stack": "v5.0.0",
    "subtitles_type": "burned",
    "font": "Arial",
    "border_color": "00000000",
    "font_color": "fffc03",
    "border_style": "outline"
  }

Agora, reserve um momento para admirar nossas legendas retrô em todo o seu esplendor.

Concluindo

Isso é tudo para nossa breve visão sobre a estilização de legendas com a Transloadit. Claro, fique à vontade para experimentar os parâmetros e descobrir o que funciona melhor para você e o seu conteúdo. Para ainda mais personalização e controle detalhado, dê uma olhada nas legendas SSA⁠, que a Transloadit também suporta.

Até a próxima! E, enquanto isso, que tal conferir uma das nossas demonstrações EN (English)?