建立自己的视频流媒体平台 | 比你想象得更轻松
在本视频中,@CodeWithHarry教我们如何使用 HTML、CSS 和 next.js 创建视频流网站。他还解释了如何使用 LinodeObject Storage 存储视频,并使用 HTML、CSS 和 Javascript 将视频从Object Storage Bucket 直接流式传输到我们的浏览器。
章节
0:00本视频中我们要做的事情
0:30创建 next.js 项目
1:38在 next.js 项目中添加尾风 CSS
5:08创建导航栏组件
7:00使用 chatGPT 对导航条进行编码
7:40构建导航栏基础
10:00将 ChatGPT 代码转换为 React 代码
13:15删除 ChatGPT 代码
13:36更改导航栏文本
14:30创建 watch.js
16:30创建视频上传模块
20:00创建文件上传标签
22:30创建观看视频模块
23:45在 Linode 创建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: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总结
Linode 新手?从这里开始使用 100 美元信用额度!
了解有关Linode视频流的更多信息。
观看另一个视频流应用程序教程。
订阅以获得新节目的通知。
#VideoStreaming #objectstorage #codewithharry
产品:Linode,Object Storage, 视频流; @CodeWithHarry