나만의 비디오 스트리밍 플랫폼 구축하기 | 생각보다 쉽습니다!

이 동영상에서는 @CodeWithHarry가 HTML, CSS, next.js를 사용하여 동영상 스트리밍 웹사이트를 만드는 방법을 알려드립니다. 또한 Linode Object Storage 를 사용하여 동영상을 저장하고 Object Storage 버킷에서 바로 브라우저로 동영상을 스트리밍하는 방법도 HTML, CSS 및 Javascript를 사용하여 설명합니다.

챕터
챕터:0:00 이 동영상에서 다룰 내용
0:30 next.js 프로젝트 만들기
1:38 next.js 프로젝트에 Tailwind CSS 추가하기
5:08 navbar 컴포넌트 생성하기
7:00 chatGPT를 사용하여 navbar 코딩하기
7:40 navbar 기초 구축하기
10:00 ChatGPT에서 React 코드로 코드 변환하기
13:15 ChatGPT 코드 제거하기
13:36 내비게이션 바 텍스트 변경하기
14:30 watch.js 생성하기
16:30 비디오 업로드 모듈 만들기
20:00 파일 업로드 태그 생성
22:30 동영상 보기 모듈 만들기
23:45 리노드에서 Object Storage 버킷 생성하기
25:00 React 파일 업로더 생성하기
26:25 생성하기 API
28:15 테스트 API
30:10 Formidable 및 S3-SDK 설치하기
30:30 upload.js 빌드
32:10 next.js에서 바디파서 비활성화하기
32:50 Formidable을 활용하여 폼 파싱하기
36:20 upload.js QA
39:20 list.js 생성하기
43:12 프론트엔드에 연결하기
44:20 비디오 카드로 시청 페이지 채우기
49:10 업로드 페이지를 다음에 연결 API
55:00 업로드 최대 파일 크기 수정
56:00 시청 페이지에 업로드한 동영상 표시하기
1:03:50 시청 페이지에 플레이어 만들기
1:10:50 플레이어 업로드 및 테스트하기
1:14:40 다운로드 버튼을 아이콘으로 변경하기
1:16:50 결론

리노드를 처음 사용하시나요? 여기에서 $100 크레딧으로 시작하세요!
Linode에서동영상 스트리밍에 대해 자세히 알아보세요.
다른 동영상 스트리밍 앱 튜토리얼을 시청하세요.
구독을 신청 하여 새로운 에피소드가 나올 때마다알림을 받으세요.

#비디오 스트리밍 #오브젝트 스토리지 #코드위드해리
제품: Linode, Object Storage, 비디오 스트리밍; @CodeWithHarry

개발자 툴