前言（写在前头）😊
- 本人在过去几个月里，陆陆续续地接触了一些音视频相关的知识，并对相关内容产生了浓厚的兴趣。由于本人是主攻前端相关的，故希望能够综合前几个月的个人所得，一点点从零开始搭建一个简单的player.js。由于个人能力所限，第一次接触这一方面的开发，可能有所不足，权当抛砖引玉，欢迎交流。
实现的目标🎯
在HTML5中我们可以使用原生的<video>标签播放视频，只需要通过一些简单的设置，便可以轻松播放视频。但是存在较大的缺陷，例如无法播放HLS (HTTP Live Streaming) 或 DASH (Dynamic Adaptive Streaming over HTTP) 这样的自适应流媒体协议，需要使用第三方库（如 hls.js、dash.js）来支持这些流媒体格式。而我们的最基本的目标就是要实现一个可以支持HLS格式的多媒体player，并在此基础拓展出更多的可能性，总而言之，我们需要实现如下基本的功能。
- 支持HLS协议
- 支持H.265 编码格式
- 打包成SDK包发布
需要的前置知识💪
- 总所周知，音视频开发是一项具有非常高挑战性的工作，需要非常深入的钻研。假如你是我和一样以一个小白的身份接触这一方面的知识，那么良好的基础知识储备将会为接下来的工作打下良好的基础。
- JavaScript和HTML相关
- MSE api
- ArrayBuffer api
- 熟悉HTML5 的媒体元素
<video>，<<audio> - 计算机网络的相关知识 HTTP,TCP/UDP等
- 基础的音视频编码
- 常见的音视频编码格式（如H.264, H.265, AAC等），以及如何进行编码、解码。
- 容器格式：常见的音视频容器（如MP4、FLV、MKV、TS等），理解容器和编码的区别。
- 帧、比特率、采样率：理解视频的帧率（FPS） ，I P B帧，音频的采样率、声道等技术概念
- 音频与视频同步：音频和视频的时间戳同步技术，避免音视频不同步的情况
- RTMP和HLS流媒体协议还有WEBRTC
- FFmpeg 和 WebAssembly
。。。大概就是这一些，后面想到会陆陆续续补充
从图片开始🍚
- 当我们把视频速度放到非常慢的时候，我们会发现视频是由连续相似的图片组成的，这些图片就是视频的帧（frame），当播放加速就形成了视频，视频的帧率就是每秒钟切换的图片数，称之为 FPS。由此可知，视频的数据到头来可以看成是一系列的图片数据。但是这引出了一个问题，假如我们完整地保存每一帧的图片数据，那么视频的数据量会非常大，这样不仅占用空间，而且传输速度也会变慢。所以要对视频进行压缩，这就引出了视频编码的概念，常用的视频编码有 H.264、H.265、VP9 等等。光是有图片还不够，我们还需要声音，声音也是一种数据，肯定也是需要进行编码压缩的。于是乎我们通过算法处理得到两份数据包，一份是视频数据包，一份是音频数据包，但他们是独立存在的，我该如何把他们合并成一个文件呢？这就引出了封装格式的概念。封装格式就是把音频数据包和视频数据包合并在一起的一种格式，例如 MP4、AVI、FLV 等等。
- 假如说原生的视频数据是食材，那么编码就是把食材处理做成菜，封装就是把菜分开装盘最后合上盖子，而HLS 和 RTMP 等流媒体协议就是把盘子端到你面前的过程。
- 上述所有的流程只为一件事服务，就是更快更好地把菜端到你的面去，而播放器就像一位服务生。它会接过盘子，把菜和料汁打开，混合好，最后呈现给你。
- 由此根据上述流程，我们可以画出一个视频播放器的大致工作流程，接着我们便可以围绕着这个流程，一步步搭建出我们的播放器骨架，在一步步填充骨肉
...未完待续🐱💻
