Os primeiros dias do vídeo na Web não foram muito bons. Começamos com plug-ins de navegador e codecs personalizados, depois passamos para o Flash e, por fim, encontramos o caminho do HTML <video>. Quando resolvemos o problema da tecnologia, começamos a usar mais vídeos para conteúdo e publicidade. O próximo problema a ser resolvido foi a conversão, ou seja, fazer com que as pessoas clicassem na miniatura do vídeo para assisti-lo.
Implementamos o placeholder para mostrar uma miniatura do vídeo, mas achamos muito mais eficaz mostrar uma visualização do vídeo. Escrevi uma postagem no blog sobre Como criar uma visualização curta do vídeo mas minha técnica era baseada em matemática, não intuitiva. Cloudinary lançou um recurso para criar visualizações inteligentes de vídeo usando inteligência artificial. Com o Cloudinary, o senhor pode criar uma visualização de vídeo que leva em conta as partes mais atraentes de um vídeo!
Usando a visualização de vídeo baseada em IA
Depois de criar sua conta gratuita no Cloudinary, carregue seus vídeos. O Cloudinary oferece uma série de APIs (PHP, Node.js, Ruby, Java etc.) para automatizar o processo de upload de vídeos. Depois que o vídeo tiver sido carregado e um ID exclusivo tiver sido atribuído a ele. O senhor pode fazer referência a ele por meio do URL:
https://res.cloudinary.com/david-wash-blog/video/upload/v1553976846/arshavin-4-goals.mp4
Para usar a geração de visualização de vídeo baseada em IA, adicione a tag e_preview com a duração da visualização que o senhor deseja:
https://res.cloudinary.com/david-wash-blog/video/upload/e_preview:duration_5/v1553976846/arshavin-4-goals.mp4
Se preferir usar outra API, como o ReactJS, o senhor pode fazer isso:
<Video publicId="arshavin-4-goals" > <Transformation effect="preview:duration_10" /> </Video>
Além do incrível vídeo baseado em IA gerado a partir do vídeo original, o senhor também pode aplicar outras transformações ao vídeo gerado, como modificações de tamanho e filtros:
https://res.cloudinary.com/david-wash-blog/video/upload/w_500/e_preview:duration_5/e_deshake:32/v1553976846/arshavin-4-goals.mp4
O senhor pode até mesmo trocar de formato, optando por carregar a visualização como um GIF animado:
https://res.cloudinary.com/david-wash-blog/video/upload/e_preview:duration_5/v1553976846/arshavin-4-goals.gif
Como em muitos outros recursos do Cloudinary, o Cloudinary fornece uma API e uma biblioteca JavaScript utilitária para interagir com a mídia. Esse auxiliar de API permite que o senhor mostre uma miniatura básica e, em seguida, mostre a visualização do vídeo ao passar o mouse sobre o elemento:
Veja a caneta MRKJPP por David Walsh (@darkwing) em CodePen.
Esse comportamento é usado por muitos sites centrados em vídeo, como o YouTube!
Cloudinary tem o hábito de fazer com que tarefas difíceis de mídia pareçam fáceis. Adoro o fato de suas APIs serem construídas de forma que o senhor possa realizar quase tudo modificando um URL. Transformações e redimensionamento de imagens são uma coisa, mas usar a IA para detectar as partes importantes de um vídeo é um recurso de nível superior que provavelmente não pode ser codificado pelo senhor. O mais importante é que essas visualizações podem melhorar drasticamente a conversão de cliques com muito pouco esforço!
Dê Cloudinary uma análise aprofundada: seus recursos são incomparáveis e o senhor pode começar gratuitamente!