Os usuários gostam de mídia, especialmente vídeos, porque elas podem ser divertidas e informativas. Em dispositivos móveis, os vídeos podem ser uma maneira mais fácil de consumir informações do que texto. Para uma boa experiência do usuário, os vídeos não podem precisar de mais do que a largura de banda disponível. É importante que os usuários possam usá-los em qualquer dispositivo. Os usuários nunca devem esperar o download da mídia. Ninguém gosta quando aperta o play e nada acontece.
Você com certeza já consumiu vídeos no seu dispositivo, o que significa que nada nesse último parágrafo é surpreendente. Agora você precisa aprender a colocar um vídeo ou outro arquivo de mídia no seu site. Os requisitos técnicos para adicionar mídia precisam estar a serviço da experiência do usuário.
Requisitos técnicos
- As versões de um arquivo de mídia estão em formatos comuns compatíveis com a Web, contendo streams de áudio e vídeo.
- A resolução é adequada para os dispositivos dos usuários.
- A taxa de bits não sobrecarrega a largura de banda da rede dos usuários.
- O resultado pode ser visualizado em todos os principais navegadores que usam tecnologias adequadas.
- O arquivo está criptografado (opcional).
A seção de mídia deste site ajudará você a alcançar esses requisitos técnicos. Não se preocupe se esses conceitos ainda forem um pouco abstratos. Vamos explicá-las progressivamente ao longo de todos os artigos. Na primeira seção, você vai aprender sobre os conceitos básicos de mídia e como adicionar mídia à Web na segunda seção. Na seção final, você vai conhecer as aplicações práticas, com algumas técnicas avançadas, do uso de mídia na Web.
Como exibir vídeos na Web
Há quatro abordagens que podem ser adotadas ao exibir vídeo em um site.
- Envie seus vídeos para um provedor de hospedagem de mídia, como o YouTube ou o Vimeo. Essas opções exigem que você incorpore os players deles ao seu site.
- Incorporação básica auto-hospedada usando os elementos HTML
<video>e<audio>. - Incorporação mais completa com uma biblioteca de vídeos, como Shaka Player, JW Player ou Video.js.
- Como criar seu próprio servidor de mídia e aplicativo de streaming.
Este site aborda principalmente os fundamentos da incorporação de mídia. No entanto, abordamos alguns tópicos mais avançados para que você comece a criar seu próprio aplicativo de streaming de mídia. O esforço para fazer isso não é trivial. Por isso, criamos um PWA de mídia com suporte off-line para usar como referência, que deve mostrar como isso pode ser feito e quanto esforço exige. O aplicativo não é de forma alguma uma oferta pronta para produção ou um concorrente de serviços como o YouTube ou o Vimeo, mas fornecerá um ponto de partida para aprender algo desafiador e novo.
Francamente, criar um concorrente de serviços de mídia hospedados exigiria uma equipe de engenheiros especializados e milhares de horas de trabalho humana. A menos que sua meta seja entrar nesse mercado como concorrente, é melhor usar um dos outros métodos. É bom entender a tecnologia e, embora você não possa lançar seu próprio aplicativo ou player de vídeo, é útil explorar e fazer experimentos com a vanguarda do suporte a navegadores ou, pelo menos, usar uma das bibliotecas de vídeo existentes.
O que vamos aprender
A coleção de mídia tem três partes. Nesta primeira seção, forneceremos conceitos e informações de pré-requisito para adicionar mídia ao seu site. Isso inclui explicar como os arquivos de mídia são reunidos, conceitos básicos sobre os aplicativos necessários para preparar seus arquivos para a Web e conceitos de streaming. A segunda seção explica como preparar seus arquivos e convertê-los em vários formatos e, opcionalmente, adicionar criptografia. Na última seção, vamos mostrar como incorporar um arquivo de mídia a uma página da Web, discutir práticas recomendadas de reprodução automática, usar frameworks de mídia, colocar vídeos off-line e tornar seus vídeos acessíveis.
Há muito assunto a ser abordado, então vamos começar com as noções básicas de arquivos de mídia.