快速阅读

功能概述

这是一个媒体播放器，用于播放视频和音频，可以修改播放速度、显示歌词、修改轮播逻辑、切换主题、缩放页面。

界面划分

  1. 上栏：包括白天/夜间模式切换、时间显示、媒体搜索框、消息提醒。
  2. 侧栏：包括主页、电影页、MV 页、音频页、自定义页、资源库 ABC。
  3. 主栏：显示选中的页面内容。
  4. 下栏：包括控制区、进度条、功能区。

按键控制

  • W A S：显示 / 隐藏上、侧、下栏
  • D：进入 / 退出主栏全屏
  • ← →：播放回退 / 播放快进
  • ↑ ↓：切换到上一个页面 / 下一个页面
  • F：进入 / 退出画中画
  • G：进入 / 退出视频全屏
  • Q：进入 / 退出缩放屏状态
  • R：打开 / 关闭主题窗口
  • T：打开 / 关闭模式窗口
  • V：打开 / 关闭词条窗口
  • B：打开 / 关闭视频窗口
  • 1 2 3 4 5 6 7 8：切换到第 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 个页面

核心节点

  1. 轮播图：保存元素序列到数组，所有的元素横向排列，通过设定整体偏移距离实现轮播图效果。
  2. 缩略图：设置页面栈保存当前打开的页面，对不同的页面数进行不同方式的排版。
  3. 滑动栏：设定两个按键左移和右移，改变元素的位置和层序，设定标签栈保存当前的元素序列。
  4. 搜索框：搜索框获得焦点时按下 Enter 键查找媒体，根据后缀判断资源类型，打开对应的媒体界面，输入有误时清空内容并闪烁。
  5. 词条控制：播放媒体时自动更新词条的内容，对每行绑定点击事件为修改当前媒体进度。
  6. 自定义窗体：对拖拽事件和对象定义一系列函数，确保可拖拽的对象能被正确归并。
  7. 画中画：修正画中画 API 在此程序中视觉效果不合理以及进入退出画中画时媒体资源设置不同步的问题，增加对画中画、全屏与其他状态切换的限定条件。

运行效果

主界面
检索面板
倍速播放
电影页面
播放模式
视频页面
系列菜单
音频页面
自定义页面 - 视频栏目
自定义页面 - 音频栏目
画中画播放
视频播放
缩略图
歌词面板

实现过程

2021 年

8 月 1 日

C语言做得比较差，用前端语言重写一次，反正也没什么新构思…

[{"url":"/img/captures/media-player/ch2-01.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-03.jpg","alt":"","title":""}]

8 月 2 日

启动UI动画 + 布局：控制栏、词条、模式、主题 + 主栏、侧栏动态缩放

[{"url":"/img/captures/media-player/ch2-04.jpg","alt":"","title":""}]

8 月 6 日

切换动画 + 分屏功能（一二三四分屏）

[{"url":"/img/captures/media-player/ch2-05.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-06.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-07.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-08.jpg","alt":"","title":""}]

8 月 10 日

窗口缩放 + 画中画分屏

[{"url":"/img/captures/media-player/ch2-09.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-10.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-11.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-12.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-13.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-14.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-15.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-16.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-17.jpg","alt":"","title":""}]

8 月 13 日

三天做了主体八分之一的六分之一…

[{"url":"/img/captures/media-player/ch2-18.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-19.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-20.jpg","alt":"","title":""}]

8 月 16 日

背景图动态切换和四个主题

[{"url":"/img/captures/media-player/ch2-21.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-22.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-23.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-24.jpg","alt":"","title":""}]

8 月 20 日

响应式布局

[{"url":"/img/captures/media-player/ch2-25.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-26.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-27.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-28.jpg","alt":"","title":""}]

8 月 25 日

视频和音频栏

[{"url":"/img/captures/media-player/ch2-29.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-30.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-31.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-32.jpg","alt":"","title":""}]

9 月 4 日

试着录了两首歌的歌词

[{"url":"/img/captures/media-player/ch2-33.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-34.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-35.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-36.jpg","alt":"","title":""}]

10 月 20 日

播放速率、时间轴、搜索栏、自定义栏

[{"url":"/img/captures/media-player/ch2-37.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-38.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-39.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-40.jpg","alt":"","title":""}]

10 月 25 日

终于做完了，动画效果还是超出开始的预期的，毕竟6月那时候只是想复刻…

[{"url":"/img/captures/media-player/ch2-41.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-42.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-43.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-44.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-45.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-46.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-47.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-48.jpg","alt":"","title":""},{"url":"/img/captures/media-player/ch2-49.jpg","alt":"","title":""}]