Build Your Own Video Streaming Platform | It’s Easier Than You Might Think!
In this video, @CodeWithHarry teaches us how to create a video streaming website using HTML, CSS, and next.js. He also explains how to use Linode Object Storage to store videos and stream video right from the Object Storage Bucket into our browser using HTML, CSS and Javascript.
Chapters:
0:00 What We’ll Be Doing In This Video
0:30 Create next.js project
1:38 Add Tailwind CSS to next.js project
5:08 Create navbar component
7:00 Use chatGPT to code navbar
7:40 Build navbar foundation
10:00 Convert code from ChatGPT to React Code
13:15 Remove ChatGPT Code
13:36 Change navbar text
14:30 Create watch.js
16:30 Create Video Upload Module
20:00 Create File Upload Tag
22:30 Create Watch Videos Module
23:45 Create Object Storage Bucket at Linode
25:00 Create React File Uploader
26:25 Create API
28:15 Test API
30:10 Install Formidable and S3-SDK
30:30 Build upload.js
32:10 Disable bodyparser in next.js
32:50 Utilize Formidable to Parse Forms
36:20 QA upload.js
39:20 Create list.js
43:12 Connect to the Front End
44:20 Populate Watch Page with Video Cards
49:10 Connect Upload Page to API
55:00 Fix Upload Max File Size
56:00 DisplayUploaded Videos on Watch Page
1:03:50 Create Player on Watch Page
1:10:50 Upload and Test Player
1:14:40 Change Download Button to Icon
1:16:50 Conclusion
New to Linode? Get started here with a $100 credit!
Learn more about Video Streaming on Linode.
Watch another video streaming app tutorial.
Subscribe to get notified of new episodes as they come out.
#VideoStreaming #objectstorage #codewithharry
Product: Linode, Object Storage, Video Streaming; @CodeWithHarry
You might also like…
-
Harnessing the New Next.js Server Actions Feature To Improve Your Development Efficiency
In this video, Harry explains how to use Next.js server actions, server-run functions that don't require an API, to create an app. -
Deploying a ChatGPT Clone to a Server Using the OpenAI API Part 2
In part two, Tomi shows us how to use the OpenAI API to enable the user to have a chat with the chatbot and deploy the app. -
Self Hosted GitHub Service | Gitea with Cloudron
In this tutorial, we'll show you how to install an additional app to your Cloudron instance, using Gitea as an example. -
3 Ways to Improve App Architecture | Streamline AI Powered Apps with Caching Strategies and The Edge
In this bonus episode, Austin discusses app architectures that go beyond the basics, such as database caching, edge computing, and more.