Os usuários gostam de mídia, especialmente vídeos, que 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 o 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 poder usá-los em qualquer dispositivo. Os usuários não podem precisar esperar o download da mídia. Ninguém gosta quando pressiona o botão de reprodução e nada acontece.
Você já consumiu vídeos no seu dispositivo, o que significa que nada no último parágrafo o surpreende. 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.
Os requisitos técnicos
- As versões de um arquivo de mídia estão em formatos comuns para a Web que contêm 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 usando as tecnologias adequadas.
- O arquivo está criptografado (opcional).
A seção mídia deste site vai ajudar você a atender a esses requisitos técnicos. Não se preocupe se esses conceitos ainda forem um pouco abstratos. Vamos explicar isso progressivamente ao longo de todos os artigos. Na primeira seção, você vai aprender sobre os conceitos básicos de mídia e, em seguida, como adicionar mídia à Web na segunda seção. Na seção final, você vai aprender sobre as aplicações práticas, com algumas técnicas avançadas, de usar mídia na Web.
Como mostrar vídeos na Web
Existem quatro abordagens que você pode usar para 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 no seu site.
- Incorporação autohospedada básica usando os elementos HTML
<video>e<audio>. - Incorporação com mais recursos usando uma biblioteca de vídeo, como o Shaka Player, JW Player ou Video.js.
- Criar seu próprio servidor de mídia e aplicativo de streaming.
Este site aborda principalmente os conceitos 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 uma PWA de mídia com suporte off-line para usar como referência, que mostra como isso pode ser feito e quanto esforço é necessário. O aplicativo não é uma oferta pronta para produção ou um concorrente de serviços como o YouTube ou o Vimeo, mas vai fornecer 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 especialistas e milhares de horas de trabalho. A menos que seu objetivo seja entrar nesse mercado como um 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 o suporte de ponta do navegador ou, pelo menos, usar uma das bibliotecas de vídeo disponíveis.
O que vamos aprender
A coleção mídia tem três partes. Nesta primeira seção, vamos fornecer 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, 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 e convertê-los em vários formatos e, opcionalmente, adicionar criptografia. Na última seção, vamos mostrar como incorporar um arquivo de mídia em uma página da Web, discutir as práticas recomendadas de reprodução automática, usar frameworks de mídia, fazer vídeos off-line e torná-los acessíveis.
Há muito o que aprender, então vamos começar com os conceitos básicos de arquivos de mídia.