Os usuários gostam de mídia, especialmente vídeos. Eles podem ser divertidos e informativos. 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. Os usuários precisam conseguir usá-los independentemente do dispositivo com que estiverem visualizando. Os usuários nunca devem precisar esperar o download de mídia. Ninguém gosta quando ele aperta o play e nada acontece.
Você com certeza já consumiu vídeo no seu próprio dispositivo, o que significa que nada no último parágrafo surpreende você. Agora você precisa aprender como colocar um vídeo ou outro arquivo de mídia em seu próprio site. Os requisitos técnicos de adicionar mídia devem estar a serviço da experiência do usuário.
Os 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.
- Ela não sobrecarrega a largura de banda da rede dos usuários.
- O resultado pode ser visto em todos os principais navegadores com as tecnologias adequadas.
- O arquivo está criptografado (opcional).
A seção de mídia deste site ajudará você a atingir 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 os conceitos básicos de mídia, como adicionar mídia à Web na segunda seção e, na seção final, os aplicativos práticos, com algumas técnicas avançadas, de uso de mídia na Web.
Como exibir vídeos na Web
Há quatro abordagens que podem ser adotadas ao exibir vídeos 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 auto-hospedada básica usando os elementos HTML
<video>e<audio>. - Incorporação mais completa usando uma biblioteca de vídeos, como Shaka Player, JW Player ou Video.js.
- Criar seu próprio servidor de mídia e aplicativo de streaming.
Este site abrange principalmente os princípios básicos de incorporação de mídia. No entanto, abordamos alguns tópicos mais avançados para você começar 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 mostra como fazer isso pode ser feito e o quanto esforço é necessário. 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 oferece um ponto de partida para aprender algo novo e desafiador.
Francamente, criar um concorrente para 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 testar as tecnologias mais avançadas de suporte a navegadores ou, pelo menos, usando uma das bibliotecas de vídeo existentes.
O que vamos aprender
A coleção de mídia tem três partes. Na primeira seção, forneceremos conceitos e informações sobre os pré-requisitos para adicionar mídia ao seu site. Isso inclui explicar como os arquivos de mídia são montados, noções básicas 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, convertê-los em vários formatos e, opcionalmente, adicionar criptografia. Na última seção, mostraremos como incorporar um arquivo de mídia em uma página da Web, discutir práticas recomendadas de reprodução automática, usar frameworks de mídia, deixar vídeos off-line e tornar seus vídeos acessíveis.
Há muito assunto para abordar, então vamos começar com Noções básicas sobre arquivos de mídia.