Só há uma coisa pior do que não ter internet: internet não confiável. A frustração que sinto quando uma página carrega rapidamente, depois a seguinte fica muito lenta (se é que carrega) e depois uma mistura é incontrolável. Tipo… jogar o dispositivo do outro lado da sala é frustrante. Essa lentidão é mais aparente quando tento reproduzir mídia, mais especificamente vídeo, em que o visual é irregular, o som é cortado e o usuário fica furioso.
Na semana passada, escrevi sobre o Práticas recomendadas de vídeo HTML5 e os incríveis utilitários fornecidos pelo Cloudinary para colocar vídeos otimizados e configuráveis em seu site. Cloudinary permite personalizar o pôster do vídeo, os controles de vídeo e até mesmo aplicar filtros e transformações ao próprio vídeo. Analisando mais detalhadamente, o senhor pode até mesmo controlar os níveis de taxa de bits e codecs, o que permite uma melhor personalização do fornecimento de vídeo.
Como enviar um vídeo
O senhor pode carregar um vídeo no site do Cloudinary, mas vamos nos divertir um pouco e usar a API do Cloudinary Node.js para carregar um vídeo:
cloudinary.uploader.upload('sample-video.mp4', function(result) {
// Callback
console.log('result: ', result);
}, {
public_id: 'sample-video',
resource_type: 'video'
});
O Cloudinary fornece PHP, Python e uma série de outras bibliotecas de API. Depois que o vídeo é carregado, o senhor pode chamar o método a seguir para recuperar a string HTML ideal do vídeo:
cloudinary.video('sample-video');
/*
<video poster="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.jpg">
<source src="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.webm" type="video/webm">
<source src="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.mp4" type="video/mp4">
<source src="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.ogv" type="video/ogg">
</video>
*/
Manipulação da qualidade e da taxa de bits do vídeo
Dependendo do dispositivo, do navegador, da carga de tráfego, da duração do vídeo ou de uma série de outras variáveis, talvez o senhor queira modificar a qualidade ou a taxa de bits de um vídeo em seu site. Embora a qualidade e a taxa de bits sejam duas manipulações distintas, lembre-se de que quanto maior a taxa de bits, maior a qualidade.
Primeiro, vamos definir uma qualidade desejada:
cloudinary.video('sample-video', { quality: 50 });
Definir a taxa de bits desejada é igualmente fácil:
cloudinary.video('sample-video', { bit_rate: '250k' });
A API é muito fácil de usar, sem surpresas!
Streaming com taxa de bits adaptável – HLS e MPEG
O streaming com taxa de bits adaptável é uma técnica de fornecimento de vídeo que ajusta a qualidade de um fluxo de vídeo em tempo real de acordo com a largura de banda detectada e a capacidade da CPU. Isso permite que os vídeos sejam iniciados mais rapidamente, com menos interrupções de buffer, e com a melhor qualidade possível para o dispositivo e a conexão de rede atuais, a fim de maximizar a experiência do usuário.
O Cloudinary pode gerar e fornecer automaticamente todos esses arquivos a partir de um único vídeo original, transcodificado para um ou ambos os protocolos a seguir:
- HTTP Live Streaming (HLS)
- Dynamic Adaptive Streaming over HTTP (MPEG-DASH)
A configuração do streaming é um processo de várias etapas (mas fácil) – vamos dar uma olhada em como fazer isso acontecer!
Etapa 1: Selecione um perfil de streaming
O Cloudinary fornece uma coleção de streaming profilesonde cada perfil define um conjunto de representações de acordo com as práticas recomendadas sugeridas.
Por exemplo, o 4k cria 8 representações diferentes na proporção de 16*9, de altíssima qualidade a somente áudio, enquanto o perfil sd cria apenas 3 representações, todas na proporção 4:3. Outros perfis comumente usados incluem ohd e o full_hd perfis.
Para ver a lista completa de perfis de streaming predefinidos disponíveis e as configurações de cada representação, consulte Perfis de streaming predefinidos.
Segunda etapa: Carregue seu vídeo com uma transformação ansiosa, incluindo o perfil e o formato de streaming
Um único perfil de streaming é composto por muitos arquivos derivadosportanto, pode levar algum tempo para que o Cloudinary gere todos eles. Portanto, ao carregar o vídeo (ou mais tarde, explicitamente), o senhor deve incluir transformações ávidas e assíncronas com o perfil de streaming e o formato de vídeo necessários.
O senhor pode até mesmo preparar ansiosamente seus vídeos para transmissão em ambos os formatos e pode incluir outras transformações de vídeo também. No entanto, certifique-se de que o streaming_profile seja fornecido como um componente separado das transformações encadeadas.
Por exemplo, este comando de upload codifica o big_buck_bunny.mp4 para o formato HLS usando o comando full_hdperfil de streaming:
cloudinary.uploader.upload("big_buck_bunny.mp4",
function(result) {console.log(result); },
{ resource_type: "video",
eager: [
{ streaming_profile: "full_hd", format: "m3u8" }],
eager_async: true,
eager_notification_url: "http://mysite/notify_endpoint",
public_id: "bb_bunny"});
Terceira etapa: Entrega de vídeo
Após a conclusão da transformação ansiosa, entregue seu vídeo usando o .m3u8 (HLS) ou .mpd (MPEG-DASH) e incluir o formato de arquivo (extensão) streaming_profile (sp_<profilename>) e outras transformações que correspondam exatamente àquelas que o senhor forneceu em sua transformação ansiosa (de acordo com o URL que foi retornado na resposta do upload).
cloudinary.video("bb_bunny.m3u8", {streaming_profile: "hd"})
A possibilidade de alterar a taxa de bits e a qualidade em tempo real é um recurso incrível. Claro, o senhor poderia usar seus próprios utilitários para gerar arquivos com várias taxas de bits e qualidades, mas isso parece uma perda de tempo e energia quando Cloudinary torna isso muito fácil. E quando o senhor também pode transmitir via Cloudinary? Que bônus. Quando o senhor acrescenta a capacidade de otimizar e transformar imagens, gerar imagens de forma de onda, remover fundos de fotos, imagens da tage automatizar atualizações de imagensusar o Cloudinary é uma decisão fácil para o gerenciamento de mídia multiuso!
