playground

• HTML/CSS/JavaScript basics
• UI布局
• React组件抽象
• 对常见Event的处理
• 对于特定领域WebAPI的学习
• 掌握Git基于PR的工作流程
• 代码风格

Project: Player v1

需要实现的功能:

- 一个最基本的播放器, 宽高比16:9, 宽度适合desktop浏览即可。
- 实现开始播放前的poster，考虑适应不同尺寸的海报图，不能被拉伸。
- 能使用鼠标播放/暂停，暂停时能看到暂停指示。
- 能用人类可读的方式显示播放进度，e.g. 10:00 / 1:20:00。
- 能使用鼠标调节音量。

要考虑的技术点:

- 选取合适的技术栈搭一个React的项目，考虑parcel, styled-components, RxJS, TypeScript
- 初始化一个React项目，考虑create-react-app，parcel，或者其他构建工具。
- 小步提交，PR based review。
- 一个Player组件, <Player poster="poster.jpeg" source="example.mp4" />
- 一个简单的player的demo，考虑至少提供两个视频源，切换播放。
- 一些UI的控件图可以直接选用别的流行web播放器的，如YouTube。
- 可以尝试在一些容易的地方添加测试。

添加UI测试以应对未来的修改 将demo部署到GitHub Pages 将Player组件发布到npm

TDD 构建CI - GHA

• HTML basics: 常见语义化标签, 表单控件

• CSS basics: Box Model, UI布局(Static/Absolute/Flex), font, color, background

• JavaScript basics: String, Number, Array, Date

• 代码风格: AirBnB style

• React Component: Input/Output, Side effect

• 对常见Event的处理: add/removeEventListener, capture/bubble phases

• Chrome devtools调试

• 掌握Git基于PR的工作流程: vs trunk based, 1d

• 视频WebAPI的学习: HTMLMediaElement

• 代码组织: 清晰的结构

• React组件的抽象

• 基于create-react-app构建基本的视频播放器, 3 weeks

• Error handling: Error first

• Test: 制定测试策略, 文档化

• Test: 测试代码的组织(Given/When/Then, Arrange/Act/Assert)

• Test: Jest

• styled-component

• Refactor: 用styled-component重构已实现的组件

• Build: 使用Parcel替换creact-react-app

• Lint and Prettier

• Git hooks: pre-push, pre-commit

• NPM: 视频播放器组件的npm发布

• Deploy: 视频播放demo的GitHub Pages

• CI/CD: GitHub Actions的学习, workflow/job/step

• CI/CD: 实现至少包含: lint, build, test, deploy

• Showcase: online streaming应用

• Release: 流程制定与实现, 文档化

• online streaming应用: 重播, 播放列表, 列表播放

• react-router

• functional reactive programming(optional): lodash, rxjs, bacon.js

• React state management: Redux

• Refactor: TypeScript

• Online streamming: dash.js的集成

• Server: 简单的web server, Express/Koa, 实现stub server.

• online streaming应用:

• Release: Client and server

• 用户体验优化: 动画

API

• playlist UI需要展示的基本信息，不包含视频地址
• play 包含视频地址，广告地址
• ad-data 某一个视频对应的广告，定义广告在哪个时间段

/playlist

[
    {
        id: 'assetId, UUID',
        cover: '封面图URL',
        title: '视频标题',
        synopsis: '视频概要',
        duration: '视频时长, in seconds',
    }
]

/play/{id}

{
    id: 'assetId, UUID',
    poster: '视频播放前盖在视频上的图',
    source: '视频播放源，URL，可能是 .mp4或者.mpd',
    duration: '视频时长, in seconds, 不包含广告',
    ad: '/play/${assetId}/ad, 广告'
}

/play/${assetId}/ad

[
    {
        startTime: 0,
        duration: 15,
    },
]

UI

• 展示广告的UI，能指示是不是进广告了，广告的duration, currentTime。

• 广告时禁用部分用户操作，快进、快退、进度条等。

• 正常内容部分，重现计算duration, currentTime

• 考虑本地开发和实际部署的差异把当前到GitHub Pages的部署恢复掉

  • 现在硬编码的 /api/playlist.json，如果这么写，最后的请求URL会变成 https://chiteweresh.github.io/api/playlist.json
  • 部署后对应的 https://chiteweresh.github.io/player-v1.0/api/playlist.json

• 修改ad接口，让返回多段广告，这个务必做了，体现和我们项目一致。

• 实现一个简单的express去serve现在的硬编码的接口

  • 可以考虑部署到Netlify, Heroku。保留一份能在GitHub Pages上独立工作的部署，重新给一个workflow。
  • 处理GitHub Pages上到新接口的CORS问题
  • 如果有兴趣也可以把前端应用也和express应用部署到一块

• 准备最终的showcase，可以把重要的技术要点都带上

  • review一下自己过去写过的代码，代码组织形式，适当重构。
  • 稍微制定一下发布策略，比如说trigger时机（是push branch/打version tag/点release按钮）
  • 一个从trigger（可以是push）到最终部署成功的GitHub Action
  • 最终可以展示的线上地址
  • 加一些花里胡哨的UI也是可以的

• Nice to have，如果真的什么都做完了实在没事了，把这个当成花里胡哨的UI也可以。实现一个最基本的弹幕功能，新的功能结合rxjs/baconjs

  • stub一些基于时间的弹幕，并在对应的播放时间展示出来
  • 可以实时展示当前用户输入的弹幕

Monorepo;

• Server
• API server
• Web server
• ?version=1
• download version1 dist
• index.html
• Artifact server
• Client dist/*

Server: /apis/ /index.html -> https://domain.com/player-{version}.min.js

Client:

CDN: /version -> 1.0.0 URL: https://domain.com/player-{version}.min.js