ビデオストリーミングプラットフォームの構築|意外と簡単!?
@CodeWithHarryは、HTML、CSS、next.jsを使って動画ストリーミングサイトを作成する方法を教えてくれています。また、Linode Object Storageを使って動画を保存し、HTML、CSS、Javascriptを使ってObject Storage Bucketからブラウザに動画を直接ストリーミングする方法を説明しています。
チャプター
0:00 この動画でやること
0:30next.jsのプロジェクト作成
1:38Tailwind CSSをnext.jsプロジェクトに追加する。
5:08ナビバーコンポーネントの作成
7:00 chatGPTを使ってナビバーをコーディングする
7:40 ナビバーの土台を作る
10:00 ChatGPTからReact Codeにコードを変換する。
13:15ChatGPTコードを削除する
13:36ナビバーのテキストを変更する
14:30 watch.jsの作成
16:30 動画アップロードモジュールの作成
20:00 ファイルアップロードタグの作成
22:30Create Watch Videosモジュール
23:45LinodeでObject Storage Bucketを作成する。
25:00 Reactのファイルアップローダを作る
26:25クリエイトAPI
28:15テストAPI
30:10 FormidableとS3-SDKをインストールします。
30:30 upload.jsをビルドする
32:10 next.jsでbodyparserを無効化する。
32:50Formidableを利用してフォームをパースする
36:20QAアップロード.js
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まとめ
Linodeは初めてですか?100ドルのクレジットを使ってここから始めましょう!
Linodeのビデオストリーミングについて詳しく知ることができます。
他のビデオストリーミングアプリのチュートリアルを見る。
登録すると新しいエピソードが公開されたときに通知されます。
#ビデオストリーミング #オブジェクトストレージ #codewithharry
製品です:Linode、オブジェクトストレージ、ビデオストリーミング; @CodeWithHarry