Construa a sua própria plataforma de streaming de vídeo | É mais fácil do que você poderia pensar!
Neste vídeo, @CodeWithHarry ensina-nos a criar um sítio Web de transmissão de vídeo utilizando HTML, CSS e next.js. Ele também explica como usar o Linode Object Storage para armazenar vídeos e transmitir vídeos diretamente do Object Storage Bucket para o nosso navegador usando HTML, CSS e Javascript.
Capítulos:
0:00 O que faremos neste vídeo
0:30 Criar projeto next.js
1:38 Adicionar CSS do Tailwind ao projeto next.js
5:08 Criar componente de barra de navegação
7:00 Use chatGPT para codificar a barra de navegação
7:40 Construir a base da barra de navegação
10:00 Converter código do ChatGPT para código React
13:15 Remover código do ChatGPT
13:36 Alterar texto da barra de navegação
14:30 Criar watch.js
16:30 Criar módulo de upload de vídeo
20:00 Criar Tag de Upload de Ficheiros
22:30 Criar Módulo Assistir Vídeos
23:45 Criar Object Storage Bucket no Linode
25:00 Criar React File Uploader
26:25 Criar API
28:15 Teste API
30:10 Instalar Formidable e S3-SDK
30:30 Compilar upload.js
32:10 Desabilite o bodyparser no next.js
32:50 Utilize o Formidable para analisar formulários
36:20 QA upload.js
39:20 Criar list.js
43:12 Conectar ao Front End
44:20 Preencher a página de visualização com cartões de vídeo
49:10 Conectar a página de upload a API
55:00 Corrigir o tamanho máximo do ficheiro a carregar
56:00 Exibir vídeos carregados na página de exibição
1:03:50 Criar player na página de exibição
1:10:50 Carregar e testar o player
1:14:40 Mudar o botão de download para um ícone
1:16:50 Conclusão
Novo na Linode? Comece aqui com um crédito de $100!
Saiba mais sobre o streaming de vídeo na Linode.
Assista a outro tutorial de aplicativo de streaming de vídeo.
Inscreva-se para ser notificado sobre novos episódios assim que eles forem lançados.
#VideoStreaming #objectstorage #codewithharry
Produtos: Linode, Object Storage, Video Streaming; @CodeWithHarry
Pode também gostar...
-
Maximize a sua privacidade com o Searx | DIY Cloud
O Searx é um motor de metasearch, agregando os resultados de outros motores de busca, sem armazenar informação sobre os seus utilizadores. -
WASM é a próxima onda em Cloud Computing? | Escreva na sua linguagem, implemente no WebAssembly
Neste vídeo, Gardiner explica o Web Assembly, ou simplesmente WASM, um pilar emergente da computação em nuvem, e fala sobre as suas vantagens. -
Agilizar a facturação de pequenas empresas utilizando a Ninja de Facturação | A Ferramenta de Facturação Tudo-em-Um
@DBTechYT mostra como configurar @appinvoiceninja, uma solução de facturação de código aberto, alojada num contentor Docker sobre um Linode. -
Projeto com novos recursos do Next.js 13 | Usando o Next.js 13 e o OpenAI para criar um site gerador de piadas
Neste vídeo, Harry explica como criar um site gerador de piadas aleatórias usando Next.js 13 e OpenAI's API.