Todos os produtos
Search
Central de documentação

Intelligent Media Management:Geração de sprites de vídeo

Última atualização: Jun 27, 2026

Este tópico descreve como gerar sprites de vídeo usando o recurso de transcodificação de mídia do Intelligent Media Management (IMM).

Introdução

A geração de sprites de vídeo é uma técnica que combina vários keyframes de um vídeo em uma única imagem, conhecida como sprite. Ao gerar um sprite, você fornece uma visão geral rápida das diferentes cenas do vídeo, permitindo que os usuários naveguem e selecione o conteúdo com mais eficiência.

image

Casos de uso

  • Pré-visualização de vídeo e navegação de conteúdo: Os sprites oferecem uma prévia rápida do conteúdo do vídeo, permitindo que os usuários examinem os keyframes e saltem facilmente para as partes de seu interesse.

  • Listas de reprodução de vídeo: Utilize sprites para exibir miniaturas de cada vídeo em uma playlist. Essa abordagem cria uma interface mais limpa e visualmente atraente, melhorando a experiência do usuário.

  • Compartilhamento em redes sociais: Ao compartilhar vídeos nas redes sociais, um sprite pode servir como imagem de capa para ajudar os espectadores a entenderem rapidamente o conteúdo do vídeo, aumentando as taxas de cliques e visualizações.

  • Transmissões ao vivo e replays de eventos: Para eventos ao vivo ou conteúdo gravado, os sprites ajudam os espectadores a encontrar destaques rapidamente, tornando a visualização de replays mais prática.

Formatos de áudio e vídeo suportados

Categoria

Formato

Áudio

Todos os formatos principais, como AAC, MP3, WAV, FLAC, WMA, AC3 e OPUS.

Vídeo

Todos os formatos principais, como MP4, MPEG-TS, MKV, MOV, AVI, FLV, M3U8, WebM, WMV, RM e VOB.

Procedimento

Pré-requisitos

  • Crie um AccessKey. Para mais informações, consulte Criar um AccessKey.

  • Ative o Object Storage Service (OSS) e crie um bucket. Para mais informações, consulte Criar um bucket.

  • Ative o Intelligent Media Management (IMM). Para mais informações, consulte Ativar o IMM.

  • Crie um projeto no console do IMM. Para mais informações, consulte Criar um projeto.

    Nota
    • Também é possível chamar uma operação de API para criar um projeto. Para mais informações, consulte Criar um projeto.

    • Chame a operação ListProjects para listar todos os projetos criados em uma região específica.

Etapa 1: Fazer upload de um arquivo

Use o console do OSS para fazer upload de um arquivo de mídia em um bucket na mesma região do seu projeto IMM.

Na página File Management do bucket, clique em Upload File. No painel Upload File, clique em Scan for Files para selecionar o arquivo de mídia desejado. Mantenha a configuração padrão de ACL como Inherit from Bucket e clique em Upload File para concluir o envio. O tamanho máximo para um arquivo enviado pelo console é de 5 GB. Para enviar arquivos maiores, utilize o ossutil, o SDK do OSS ou a API do OSS.

Etapa 2: Gerar sprites de vídeo

Chame a operação CreateMediaConvertTask para criar uma tarefa de geração de sprites de vídeo.

Exemplos de parâmetros

O processo de geração de um sprite de vídeo geralmente inclui as seguintes etapas:

  1. Extração de quadros: O serviço extrai keyframes específicos do vídeo.

  2. Processamento de imagem: O serviço redimensiona e converte os quadros extraídos para garantir consistência e atender aos requisitos de saída.

  3. Geração do sprite: O serviço organiza os quadros processados em uma grade e os mescla em uma única imagem para formar o sprite.

Os exemplos a seguir usam o projeto IMM test-project e o arquivo oss://test-bucket/video-demo/sample-video.mov para gerar sprites de vídeo.

Para mais informações sobre os recursos de processamento de mídia e como usá-los, consulte Transcodificação de mídia.

Nota
  • Utilize o OpenAPI Explorer para processar arquivos de vídeo e visualizar códigos de exemplo do SDK.

  • Não defina os parâmetros Target.URI e Target.Container para a geração de sprites de vídeo.

  • A geração de sprites de vídeo pode produzir várias imagens de sprite. A quantidade exata depende do número de subimagens e da configuração de linhas e colunas do sprite.

  • Defina o URI de saída do sprite como oss://bucket/objectPrefix-{index}.{autoext}. Se você não incluir a variável {index}, as imagens de saída poderão se sobrescrever. Para mais informações sobre variáveis, consulte Modelo TargetURI.

Gerar um sprite do vídeo completo

Este exemplo gera um sprite capturando um quadro a cada dois segundos de todo o vídeo. Cada sprite contém uma grade 3x3 de subimagens, e cada subimagem tem resolução de 200x150 pixels.

image

Informações de transcodificação

  • Formato do sprite: jpg

  • Intervalo de captura de quadros: 2 segundos

  • Layout das subimagens do sprite: 3x3

  • Resolução da subimagem: 200x150

  • Preenchimento entre subimagens (Pad): 0

  • Margem entre subimagens e bordas do sprite (Margin): 0

  • Método de dimensionamento da subimagem: Dimensionar e cortar. Para mais informações, consulte método de dimensionamento.

  • Caminho do arquivo de saída: oss://test-bucket/video-demo/sprites-{index}.{autoext}

  • Notificação de conclusão: Enviar uma mensagem MNS para o tópico MNS test-mns-topic.

Para um exemplo de SDK, consulte o OpenAPI Explorer. Os parâmetros do exemplo já estão preenchidos. Modifique-os conforme necessário antes de depurar.

Parâmetros da solicitação

{
  "ProjectName": "test-project",
  "Notification": {
    "MNS": {
      "TopicName": "test-mns-topic"
    }
  },
  "Sources": [
    {
      "URI": "oss://test-bucket/video-demo/sample-video.mov"
    }
  ],
  "Targets": [
    {
      "Image": {
        "Sprites": [
          {
            "Format": "jpg",
            "Interval": 2,
            "Margin": 0,
            "Pad": 0,
            "ScaleHeight": 150,
            "ScaleType": "crop",
            "ScaleWidth": 200,
            "TileHeight": 3,
            "TileWidth": 3,
            "URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}"
          }
        ]
      }
    }
  ]
}

Gerar um sprite de um intervalo de tempo específico

Este exemplo gera um sprite capturando um quadro a cada dois segundos, começando na marca de 5 segundos até a marca de 30 segundos do vídeo. Cada sprite contém uma grade 3x5 de subimagens, e as dimensões de cada subimagem são dimensionadas para 1/10 do vídeo de source.

image

Informações de transcodificação

  • Formato do sprite: jpg

  • Tempo inicial de captura: 5 segundos

  • Duração da captura: 25 segundos

  • Intervalo de captura de quadros: 2 segundos

  • Layout das subimagens do sprite: 3x5

  • Resolução da subimagem: 1/10 do vídeo de source

  • Preenchimento entre subimagens (Pad): 4

  • Margem entre subimagens e bordas do sprite (Margin): 5

  • Método de dimensionamento da subimagem: Ajustar ao tamanho sem barras pretas. Para mais informações, consulte método de dimensionamento.

  • Caminho do arquivo de saída: oss://test-bucket/video-demo/sprites-{index}.{autoext}

  • Notificação de conclusão: Enviar uma mensagem MNS para o tópico MNS test-mns-topic.

Para um exemplo de SDK, consulte o OpenAPI Explorer. Os parâmetros do exemplo já estão preenchidos. Modifique-os conforme necessário antes de depurar.

Parâmetros da solicitação

{
  "ProjectName": "test-project",
  "Notification": {
    "MNS": {
      "TopicName": "test-mns-topic"
    }
  },
  "Sources": [
    {
      "Duration": 25,
      "StartTime": 5,
      "URI": "oss://test-bucket/video-demo/sample-video.mov"
    }
  ],
  "Targets": [
    {
      "Image": {
        "Sprites": [
          {
            "Format": "jpg",
            "Interval": 2,
            "Margin": 5,
            "Pad": 4,
            "ScaleHeight": 0.1,
            "ScaleType": "fit",
            "ScaleWidth": 0.1,
            "TileHeight": 5,
            "TileWidth": 3,
            "URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}"
          }
        ]
      }
    }
  ]
}

Gerar um sprite com quadros uniformemente espaçados

Este exemplo mostra como usar a operação DetectMediaMeta para obter a duração do vídeo e, em seguida, gerar um sprite com um número específico de quadros uniformemente espaçados.

Etapa 1: Obter a duração do vídeo

Chame a operação DetectMediaMeta para obter a duração do vídeo. Para um exemplo de SDK, consulte o OpenAPI Explorer. Os parâmetros do exemplo já estão preenchidos. Modifique-os conforme necessário antes de depurar.

Parâmetros da solicitação

{
  "ProjectName": "test-project",
  "SourceURI": "oss://test-bucket/video-demo/sample-video.mov"
}

Parâmetros da resposta

{
  "Addresses": [],
  "AudioStreams": [],
  "Bitrate": 45521134,
  "Duration": 31.64,
  "FormatLongName": "QuickTime / MOV",
  "FormatName": "mov,mp4,m4a,3gp,3g2,mj2",
  "ProduceTime": "2014-12-19T14:20:38Z",
  "RequestId": "94A9AF46-B403-51D5-988F-D9B4939DEF39",
  "Size": 180036088,
  "StreamCount": 2,
  "Subtitles": [],
  "VideoHeight": 1080,
  "VideoStreams": [
    {
      "AverageFrameRate": "25/1",
      "BitDepth": 8,
      "Bitrate": 45517646,
      "CodecLongName": "H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10",
      "CodecName": "h264",
      "CodecTag": "0x31637661",
      "CodecTagString": "avc1",
      "ColorPrimaries": "bt709",
      "ColorRange": "tv",
      "ColorSpace": "bt709",
      "ColorTransfer": "bt709",
      "Duration": 31.64,
      "FrameCount": 791,
      "FrameRate": "25/1",
      "HasBFrames": 1,
      "Height": 1080,
      "Language": "eng",
      "Level": 50,
      "PixelFormat": "yuv420p",
      "Profile": "Main",
      "TimeBase": "1/2500",
      "Width": 1920
    }
  ],
  "VideoWidth": 1920
}

Etapa 2: Gerar o sprite com quadros uniformemente espaçados

A duração do vídeo é de 31,64 segundos. Para capturar 9 subimagens uniformemente espaçadas, o intervalo de captura de quadros é calculado como 31,64 / (9 - 1) = 3,955 segundos. O sprite possui um layout 3x3, e as dimensões de cada subimagem são dimensionadas para 1/10 do vídeo de source.

Informações de transcodificação

  • Formato do sprite: jpg

  • Intervalo de captura de quadros: 3,955 segundos

  • Layout das subimagens do sprite: 3x3

  • Resolução da subimagem: 1/10 do vídeo de source

  • Preenchimento entre subimagens (Pad): 4

  • Margem entre subimagens e bordas do sprite (Margin): 5

  • Método de dimensionamento da subimagem: Ajustar ao tamanho sem barras pretas. Para mais informações, consulte método de dimensionamento.

  • Caminho do arquivo de saída: oss://test-bucket/video-demo/sprites-{index}.{autoext}

  • Notificação de conclusão: Enviar uma mensagem MNS para o tópico MNS test-mns-topic.

Para um exemplo de SDK, consulte o OpenAPI Explorer. Os parâmetros do exemplo já estão preenchidos. Modifique-os conforme necessário antes de depurar.

Parâmetros da solicitação

{
  "ProjectName": "test-project",
  "Notification": {
    "MNS": {
      "TopicName": "test-mns-topic"
    }
  },
  "Sources": [
    {
      "URI": "oss://test-bucket/video-demo/sample-video.mov"
    }
  ],
  "Targets": [
    {
      "Image": {
        "Sprites": [
          {
            "Format": "jpg",
            "Interval": 3.955,
            "Margin": 5,
            "Pad": 4,
            "ScaleHeight": 0.1,
            "ScaleType": "fit",
            "ScaleWidth": 0.1,
            "TileHeight": 3,
            "TileWidth": 3,
            "URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}"
          }
        ]
      }
    }
  ]
}