这是我的面向对象课设题目，采用原生 JS + DOM 开发，计划用原生 video，因此支持的格式有限。

实现一个多媒体播放器。

• 能播放音频（MP3 格式）。
• 能播放视频（MP4 格式）。
• 可以通过菜单打开文件。
• 拥有播放历史记录，点击历史项可以播放此视频。
• 拥有进度条，拖动进度条可以调整视频进度。
• 可以显示当前播放时间与音视频总时间，以 hh:mm:ss 格式显示。
• 可以快进、快退视频，操作调整视频进度+-5 秒。
• 可以通过菜单调整视频的播放速度，需要包含[0.5 倍速、0.75 倍速、1 倍速、1.5 倍速、2 倍速]

• 界面美观
• 容易操作，可以快速上手使用。

分析需求，可以将媒体播放器划分成三个主要组成部分：音视频播放器、控制栏、播放列表。

• 音视频播放器负责处理媒体文件，并暴露出一系列方法供外界操控播放器。

• 播放列表负责记录播放历史，并且要拥有打开文件的功能。

• 控制栏拥有进度条、播放/暂停按钮、快进快退按钮、倍速菜单、播放时间几个部分。 对功能细分，定义以下类：

• AbstractPlayer：播放器抽象类，提供播放器需要的核心方法接口。

• Player：播放器类的具体实现，并增加事件系统传递消息（如播放状态改变、播放完毕）。这里有考虑过分成 VideoPlayer 和 AudioPlayer 单独实现，但经过分析，发现其区别仅仅是播放音频文件时主界面显示内容变成插画而非视频画面，区别甚微，因此合并为一个类。

• PlayList：添加打开文件功能、播放历史功能。

• ControlBar：用于更新进度条信息、时间信息，并且为播放/暂停、快进、快退按钮绑定相应处理事件。

• History：负责处理历史记录，拥有添加历史、获取历史记录的功能，相当于一个 Manager。

• Resource：存储资源文件的信息，包含文件路径与文件类型，是 APP 内传递资源的唯一方式。

• List：处理列表，可以添加、移除项目，并将内容更新到相应节点。

• ListItem：List 所使用的项封装。

• ProgressBar：进度条，处理进度条的按下、拖拽事件。

• RateMenu：动态创建菜单并挂载到 UI 节点中，可以调整传入播放器的倍速。 系统中不同的类之间通过消息系统传递信息，即通过事件进行信息传递。事件分为系统事件和自定义事件。系统事件由 DOM 触发，自定义事件将在需要的时间触发。系统使用了 MVC 架构。

无

无

• 图标资源来自 ICONFONT。
• 插画资源来自 PIXIV。