📘 Aula 22: Videos em hospedagem própria 📘

Escolha de decisão sobre hospedagem própria de mídias

Quando você decide hospedar seus vídeos no seu próprio servidor (ou em uma hospedagem paga como VPS, dedicado ou até S3 da AWS), você assume o controle total sobre eles, diferente de depender de plataformas de streaming de vídeos.

✅ Vantagens

Controle absoluto: ninguém pode remover ou restringir seus vídeos.
Sem anúncios de terceiros: você define o que aparece antes/durante/depois.
Privacidade: não há coleta de dados do usuário por plataformas externas.
Personalização: você escolhe o player, layout e formato de exibição.

⚠️ Desvantagens

Alto consumo de recursos: vídeo exige muito espaço em disco e largura de banda (especialmente se muitas pessoas assistirem ao mesmo tempo).
Manutenção: você precisa configurar servidores, compressão de vídeo e segurança.
Escalabilidade limitada: se muitos acessos acontecerem de uma vez, seu servidor pode ficar lento ou cair.

Boas Práticas em Hospedagem Própria

⚠️ Compactar os vídeos em formatos modernos (ex.: MP4 com codec H.264 ou H.265).
⚠️ Usar streaming adaptativo (HLS ou DASH), que ajusta a qualidade conforme a internet do usuário.
⚠️ Configurar CDN (Content Delivery Network), para distribuir os vídeos mais rápido no mundo todo.
⚠️ Ter um player responsivo (como Plyr, Video.js ou Shaka Player).
⚠️ Prever custos de tráfego – streaming consome muita banda, especialmente em projetos que podem viralizar.

Resumo estratégico

Hospedar vídeos por conta própria é indicado para quem quer independência total e controle profissional. Porém, exige investimento em infraestrutura, otimização de arquivos e possivelmente uma CDN (Rede de entrega de conteúdo ou rede de distribuição de conteúdo) para garantir qualidade.

Inserindo vídeos hospedados localmente

Este vídeo está hospedado em servidor próprio.

Usando a seguinte estrutura

<video controls poster="midia/videos/pato-natureza.png" width="500">
    <source src="midia/videos/Patinho.mp4" type="video/mp4">
    <source src="midia/videos/Patinho.webm" type="video/webm">
    <source src="midia/videos/Patinho.mkv" type="video/x-matroska">
    <source src="midia/videos/Patinho.ogv" type="video/ogg">
<p>Seu navegador não é compativel com essa reprodução de videos</p>
</video>

Tags e elementos usados na estrutura

Usamos <video></video>
- É a tag principal usada para inserir vídeos diretamente em páginas da web.
- O atributo controls adiciona botões padrões (play, pause, volume, barra de progresso).
- O atributo poster define a imagem de capa que aparece antes de o vídeo ser iniciado.
- O atributo width define a largura do player no navegador.

Usamos <source>
- Define os arquivos de vídeo disponíveis para reprodução.
- Cada um aponta para um formato diferente, garantindo compatibilidade entre navegadores.
- O navegador escolhe automaticamente o primeiro formato que consegue reproduzir.

Exemplos usados

type="video/mp4" → formato mais usado e suportado.
type="video/webm" → eficiente para web e navegadores modernos.
type="video/x-matroska" → usado no .mkv, mas com suporte limitado.
type="video/ogg" → mais antigo, mas ainda aceito em alguns navegadores.

Usamos parágrafo <p></p> como (fallback)
- Texto alternativo exibido caso o navegador não consiga reproduzir nenhum formato de vídeo.
- Garante acessibilidade e clareza para o usuário.

Resumindo

Essa estrutura garante que o vídeo seja exibido da melhor forma possível, oferecendo vários formatos para compatibilidade, uma imagem inicial (poster) e até mesmo uma mensagem de fallback para navegadores antigos.