Créez votre propre plateforme de streaming vidéo - C'est plus facile que vous ne le pensez !

Dans cette vidéo, @CodeWithHarry nous apprend à créer un site web de streaming vidéo en utilisant HTML, CSS et next.js. Il explique également comment utiliser Linode Object Storage pour stocker des vidéos et diffuser des vidéos directement depuis le Bucket Object Storage dans notre navigateur à l'aide de HTML, CSS et Javascript.

Chapitres :
0:00 Ce que nous allons faire dans cette vidéo
0:30 Créer le projet next.js
1:38 Ajouter le CSS Tailwind au projet next.js
5:08 Créer le composant navbar
7:00 Utiliser chatGPT pour coder la barre de navigation
7:40 Construire la fondation de la barre de navigation
10:00 Convertir le code de ChatGPT en code React
13:15 Supprimer le code ChatGPT
13:36 Modifier le texte de la barre navale
14:30 Créer watch.js
16:30 Créer le module de téléchargement vidéo
20:00 Créer la balise de téléchargement de fichiers
22:30 Création du module Watch Videos
23:45 Créer Object Storage Bucket chez Linode
25:00 Créer React File Uploader
26:25 Créer API
28:15 Test API
30:10 Installer Formidable et S3-SDK
30:30 Construire upload.js
32:10 Désactiver le bodyparser dans next.js
32:50 Utiliser Formidable pour analyser les formulaires
36:20 QA upload.js
39:20 Créer list.js
43:12 Se connecter à l'interface utilisateur
44:20 Remplir la page Watch avec des cartes vidéo
49:10 Connecter la page de téléchargement à API
55:00 Fixer la taille maximale du fichier téléchargé
56:00 Afficher les vidéos téléchargées sur la page de surveillance
1:03:50 Créer un lecteur sur la page de veille
1:10:50 Télécharger et tester le lecteur
1:14:40 Remplacer le bouton de téléchargement par une icône
1:16:50 Conclusion

Nouveau sur Linode ? Commencez ici avec un crédit de 100 $ !
Ensavoir plus sur le streaming vidéo sur Linode.
Regardez un autre tutoriel sur l'application de streaming vidéo.
Abonnez-vous pour être informé des nouveaux épisodes dès leur sortie.

#VideoStreaming #objectstorage #codewithharry
Produit : Linode, Object Storage, Streaming vidéo ; @CodeWithHarry

Outils pour les développeurs