从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