从0开始写一个播放器系列-开篇

从0开始写一个播放器系列-开篇

阅读本系列博客所需要具备的知识: js, ts , canvas Api , DOM, webpack, 不懂也没有太大的关系, 我会捎带着写出来, 剩下的自行百度

第一步,梳理所需要的功能以及收集实现方案

首先需要确定需求

既然想要做一个播放器,首先应该具有播放器基本的功能,

• 播放/暂停
• 下一个(如果传入的播放地址为数组)
• 选择清晰度
• 倍速播放
• 音量
• 画中画
• 宽屏
• 网页全屏
• 全屏
• 镜像

上方需求很简单, 通过原生的video控制条和简单的css就可以实现, 但是我们既然要做播放器就不能仅限于基本功能的开发, 所以需要加大一点难度

使用canvas 渲染 video

为什么使用canvas渲染video

表达不准确请各位大佬评论区指出

之前在准备做播放器之前我就知道canvas可以渲染video标签, 有一段时间我也很迷惑, 为什么我打心底觉得要使用canvas渲染video, 知道我开始写这篇博客的时候突然想到了.

各个浏览器之间, video的行为是不同的, 可能会出现怪异行为, 使用canvas封装一次video会很大程度的解决这些怪异行为以及很好的适配移动端

既然使用canvas渲染video标签了, 不搞点事情肯定是对不起canvas标签的, 根据我目前所知的知识, canvas是可以很好的调整整体显示的内容的, 比如说修改每个像素点的RGBA值

所以添加一个实验室功能(可能会影响到性能的功能): 滤镜功能

滤镜功能的作用是每次渲染canvas的时候修改每个像素的RGBA值

滤镜功能引出的思考:

是否需要一个中转canvas来获取ImageData

所以暂定解决方案为, video放到中转canvas中, 利用中转canvas来drawImage

最后, 我觉得一个播放器没有弹幕是没有灵魂的, 所以还要添加弹幕功能

这个播放器期望支持原生html5平台以及vue和react, 所以需要使用原生js或者typescript开发, 又因为Typescript已经趋进于主流, 所以本项目决定使用typescript进行开发

总结一下

播放器需要拥有基本的功能, 使用canvas渲染video标签, 使用中转canvas进行ImageData的获取, 添加滤镜功能, 添加弹幕功能, 使用Typescript进行开发

至此, 需求整理完毕, 下篇博客开始搭建开发环境

因为本人准备边开发播放器边写本系列的博客, 所以更新速度会比较慢, 很多内容都会继续调整, 不足之处望各位海涵

github地址: https://github.com/lidppp/dp-video
本人博客地址: https://www.lidppp.com