LMP34-WMP11

经典 Windows Media Player 11 皮肤 · LMP34 完整还原

外观概览

完整还原 WMP11 经典深蓝风格。容器尺寸 586×385，采用窗口 z-index 自然分层 —— console 控制条窗口在底层（z:1），media / list / lrc / option 四个功能窗口在上层（z:10），自动形成"视频+列表+歌词+控制条"的四区分割布局。

📺 media 窗口 (336×273)

左上角主播放区。背景 win.png 深蓝底板，覆盖视频 / 封面 / 频谱三层容器。右上角 bt_close 关闭按钮精确距右 6px。

Windows Media Player 11 皮肤
 📋 list 窗口 (250×273)

右上播放列表，与 media 等高对齐。滚动条使用原生 webkit 三组件：scrollbar_track 轨道 + scrollbar_thumb 滑块 + scrollbar_button 箭头。

📜 lrc 窗口 (250×112)

右下歌词显示，宽与 list 对齐、高 112px 紧贴底部。配合 ktv 插件实现逐字扫光高亮。

🎛️ console 控制条 (586×385)

底层容器窗口，console.png 原始 336×112 控制条背景通过 background-position:0 273px 固定到未被覆盖的底部区域，避免 586×385 容器拉伸变形。

控制条按钮布局

进度条 progress_track.png 紧贴控制条上方 (y=299)，从左到右控件顺序：

bt_prev  →  bt_stop  →  bt_play  →  bt_next  →  bt_mute  →  volume_track  →  bt_fullscreen  →  bt_option

播放按钮居中于控制条 (x=143)，其余按钮相对中心对称分布。音量条右侧依次排列视频切换、列表切换、歌词切换、全屏、随机、循环等功能按钮。

目录结构

skins/cmp4-wmp11/ ├── skin.xml 窗口布局 · 586×385 · 20 子元素 · 纯像素 XYWH 坐标 ├── skin.js 214 行 · 4 钩子 (buildLrcText / buildVideo / updateLrc / onLayout) + 1 IIFE (injectScrollbarCss) ├── preview.jpg 皮肤预览图 │ ├── win.png 媒体/列表/歌词窗口底板 336×273 ├── console.png 控制条底板 336×112 → background-position:0 273px 固定 │ ├── bt_play.png ▶ 播放 ├── bt_stop.png ■ 停止 ├── bt_prev.png ⏮ 上一曲 ├── bt_next.png ⏭ 下一曲 ├── bt_mute.png 🔊 静音 ├── bt_fullscreen.png ⛶ 全屏 ├── bt_list.png 📋 列表切换 ├── bt_lrc.png 📜 歌词切换 ├── bt_video.png 🎬 视频切换 ├── bt_option.png ⚙️ 设置 ├── bt_random.png 🎲 随机 ├── bt_repeat.png 🔁 循环 ├── bt_close.png ✕ 关闭窗口 · 精确距右 6px (6R 原始坐标映射) │ ├── progress_track.png 进度条轨道 ├── volume_track.png 音量条轨道 │ ├── scrollbar_track.png 滚动条轨道 · IIFE injectScrollbarCss 消费 ├── scrollbar_thumb.png 滚动条滑块 · IIFE injectScrollbarCss 消费 └── scrollbar_button.png 滚动条箭头 · IIFE injectScrollbarCss 消费

使用方式

LMP34.init 配置

skins: 'skins/cmp4-wmp11',

URL 参数切换

?skins=skins/cmp4-wmp11

CMP4-WMP11 · LMP34