建立自己的视频流媒体平台 | 比你想象得更轻松
@CodeWithHarry教我们如何使用HTML、CSS和next.js创建一个视频流网站。他还解释了如何使用Linode对象存储来存储视频,并使用HTML、CSS和Javascript将视频从对象存储桶直接流到我们的浏览器中。
章节:
0:00我们在本视频中要做的事情
0:30创建next.js项目
1:38在next.js项目中添加Tailwind 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创建对象存储桶
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:20QA upload.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的视频流。
观看另一个视频流应用教程。
订阅以获得新剧集的通知。
#VideoStreaming #objectstorage #codewithharry
产品:Linode, Object Storage, Video Streaming; @CodeWithHarry