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.

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.
NotaTambé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:
Extração de quadros: O serviço extrai keyframes específicos do vídeo.
Processamento de imagem: O serviço redimensiona e converte os quadros extraídos para garantir consistência e atender aos requisitos de saída.
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.
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.URIeTarget.Containerpara 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.

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.

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}"
}
]
}
}
]
}