Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Build Your Own Video Streaming Platform | It's Easier Than You Might Think!

Akamai Developer
1.04M subscribers
<__slot-el>
<__slot-el>
64K views 2 years ago #VideoStreaming #codewithharry #objectstorage
‪@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  …...more
...more

What We'll Be Doing In This Video

0:00

Create next.js project

0:30

Add Tailwind CSS to next.js project

1:38

Create navbar component

5:08

Use chatGPT to code navbar

7:00

Build navbar foundation

7:40

Convert code from ChatGPT to React Code

10:00

Remove ChatGPT Code

13:15

Change navbar text

13:36

Create watch.js

14:30

Create Video Upload Module

16:30

Create File Upload Tag

20:00

Create Watch Videos Module

22:30

Create Object Storage Bucket at Linode

23:45

Create React File Uploader

25:00

Create API

26:25

Test API

28:15

Install Formidable and S3-SDK

30:10

Build upload.js

30:30

Disable bodyparser in next.js

32:10

Utilize Formidable to Parse Forms

32:50

QA upload.js

36:20

Create list.js

39:20

Connect to the Front End

43:12

Populate Watch Page with Video Cards

44:20

Connect Upload Page to API

49:10

Fix Upload Max File Size

55:00

DisplayUploaded Videos on Watch Page

56:00

Create Player on Watch Page

1:03:50

Upload and Test Player

1:10:50

Change Download Button to Icon

1:14:40

Conclusion

1:16:50
Build Your Own Video Streaming Platform | It's Easier Than You Might Think!
1.7KLikes
64,790Views
2023Mar 22
‪@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 Cloud Computing? Get started here with a $100 credit → https://www.linode.com/lp/youtube-vie... Learn more about Video Streaming on Linode → https://www.linode.com/video-streamin... Watch another video streaming app tutorial →    • Create Your Own Video Streaming Site ...   Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_co... #VideoStreaming #objectstorage #codewithharry Product: Linode, Object Storage, Video Streaming; @CodeWithHarry

Follow along using the transcript.

Akamai Developer

1.04M subscribers