Build Your Own Video Streaming Platform | It's Easier Than You Might Think!
1,131@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 → https://www.linode.com/linodetube
Learn more about Video Streaming on Linode → https://www.linode.com/video-streaming-solutions/
Watch another video streaming app tutorial → https://www.youtube.com/watch?v=uT-xxeFkgO8
Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_confirmation=1
#VideoStreaming #objectstorage #codewithharry
Product: Linode, Object Storage, Video Streaming; @CodeWithHarry