Windows Media Player 11 皮肤
<h1 style="text-align:center;font-size:42px;font-weight:300;margin:30px 0 8px;">LMP34-<span style="color:#1e90ff;font-weight:700;">WMP11</span>
</h1>
<p style="text-align:center;color:#666;font-size:14px;margin-bottom:40px;">经典 Windows Media Player 11 皮肤 · LMP34 完整还原</p>
https://lmp34.cnlog.cc/?skins=skins/cmp4-wmp11&spectrum=17&ktv_size=13&163ph.php<hr style="border:0;border-top:1px solid #ddd;margin:40px 0;">
<h2 style="font-size:22px;font-weight:400;border-left:4px solid #1e90ff;padding-left:12px;margin-bottom:20px;">外观概览</h2>
<p style="color:#444;font-size:14px;line-height:1.9;margin-bottom:16px;">
完整还原 WMP11 经典深蓝风格。容器尺寸 <b>586×385</b>，采用窗口 <b>z-index</b> 自然分层 —— console 控制条窗口在底层（z:1），media / list / lrc / option 四个功能窗口在上层（z:10），自动形成"视频+列表+歌词+控制条"的四区分割布局。
</p>
<table style="width:100%;border-collapse:separate;border-spacing:12px;margin:20px 0;" border="0">
<tbody><tr>
<td style="width:50%;vertical-align:top;padding:20px;background:#f5f7fa;border:1px solid #e2e8f0;border-radius:8px;">
<b style="color:#1e90ff;font-size:15px;">📺 media 窗口 (336×273)</b>
<p style="color:#555;font-size:13px;line-height:1.8;margin:8px 0 0;">
左上角主播放区。背景 win.png 深蓝底板，覆盖视频 / 封面 / 频谱三层容器。右上角 bt_close 关闭按钮精确距右 6px。
</p>
</td>
<td style="width:50%;vertical-align:top;padding:20px;background:#f5f7fa;border:1px solid #e2e8f0;border-radius:8px;">
<b style="color:#1e90ff;font-size:15px;">📋 list 窗口 (250×273)</b>
<p style="color:#555;font-size:13px;line-height:1.8;margin:8px 0 0;">
右上播放列表，与 media 等高对齐。滚动条使用原生 webkit 三组件：scrollbar_track 轨道 + scrollbar_thumb 滑块 + scrollbar_button 箭头。
</p>
</td>
</tr>
<tr>
<td style="vertical-align:top;padding:20px;background:#f5f7fa;border:1px solid #e2e8f0;border-radius:8px;">
<b style="color:#1e90ff;font-size:15px;">📜 lrc 窗口 (250×112)</b>
<p style="color:#555;font-size:13px;line-height:1.8;margin:8px 0 0;">
右下歌词显示，宽与 list 对齐、高 112px 紧贴底部。配合 ktv 插件实现逐字扫光高亮。
</p>
</td>
<td style="vertical-align:top;padding:20px;background:#f5f7fa;border:1px solid #e2e8f0;border-radius:8px;">
<b style="color:#1e90ff;font-size:15px;">🎛️ console 控制条 (586×385)</b>
<p style="color:#555;font-size:13px;line-height:1.8;margin:8px 0 0;">
底层容器窗口，console.png 原始 336×112 控制条背景通过 <code style="background:#eee;padding:1px 5px;border-radius:3px;font-family:monospace;font-size:12px;">background-position:0 273px</code> 固定到未被覆盖的底部区域，避免 586×385 容器拉伸变形。
</p>
</td>
</tr>
</tbody></table>
<h3 style="font-size:16px;color:#333;margin:30px 0 14px;">控制条按钮布局</h3>
<p style="color:#555;font-size:13px;line-height:1.9;">
进度条 progress_track.png 紧贴控制条上方 (y=299)，从左到右控件顺序：
</p>
<p style="text-align:center;background:#f5f7fa;border:1px solid #e2e8f0;border-radius:8px;padding:14px 0;margin:14px 0;color:#1e90ff;font-size:13px;font-family:Consolas,'Courier New',monospace;letter-spacing:1px;">
bt_prev → bt_stop → <b style="font-size:15px;">bt_play</b> → bt_next → bt_mute → volume_track → bt_fullscreen → bt_option
</p>
<p style="color:#555;font-size:13px;line-height:1.9;">
播放按钮居中于控制条 (x=143)，其余按钮相对中心对称分布。音量条右侧依次排列视频切换、列表切换、歌词切换、全屏、随机、循环等功能按钮。
</p>
<hr style="border:0;border-top:1px solid #ddd;margin:50px 0;">
<h2 style="font-size:22px;font-weight:400;border-left:4px solid #1e90ff;padding-left:12px;margin-bottom:20px;">目录结构</h2>
<div style="position:relative;background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:20px 24px;font-family:Consolas,'Courier New',monospace;font-size:13px;line-height:1.9;overflow-x:auto;">
<button onclick="navigator.clipboard.writeText(this.nextElementSibling.textContent);this.textContent='已复制 ✓';" style="position:absolute;top:10px;right:10px;background:#313244;color:#cdd6f4;border:1px solid #45475a;border-radius:4px;padding:4px 12px;font-family:inherit;font-size:12px;cursor:pointer;">复制</button>
<div style="white-space:pre-wrap;word-break:break-all;">
<span style="color:#89b4fa;">skins/cmp4-wmp11/</span>
├── <span style="color:#f38ba8;">skin.xml</span> <span style="color:#6c7086;">窗口布局 · 586×385 · 20 子元素 · 纯像素 XYWH 坐标</span>
├── <span style="color:#fab387;">skin.js</span> <span style="color:#6c7086;">214 行 · 4 钩子 (buildLrcText / buildVideo / updateLrc / onLayout) + 1 IIFE (injectScrollbarCss)</span>
├── <span style="color:#a6e3a1;">preview.jpg</span> <span style="color:#6c7086;">皮肤预览图</span>
│
├── <span style="color:#a6e3a1;">win.png</span> <span style="color:#6c7086;">媒体/列表/歌词窗口底板 336×273</span>
├── <span style="color:#a6e3a1;">console.png</span> <span style="color:#6c7086;">控制条底板 336×112 → background-position:0 273px 固定</span>
│
├── <span style="color:#a6e3a1;">bt_play.png</span> <span style="color:#6c7086;">▶ 播放</span>
├── <span style="color:#a6e3a1;">bt_stop.png</span> <span style="color:#6c7086;">■ 停止</span>
├── <span style="color:#a6e3a1;">bt_prev.png</span> <span style="color:#6c7086;">⏮ 上一曲</span>
├── <span style="color:#a6e3a1;">bt_next.png</span> <span style="color:#6c7086;">⏭ 下一曲</span>
├── <span style="color:#a6e3a1;">bt_mute.png</span> <span style="color:#6c7086;">🔊 静音</span>
├── <span style="color:#a6e3a1;">bt_fullscreen.png</span> <span style="color:#6c7086;">⛶ 全屏</span>
├── <span style="color:#a6e3a1;">bt_list.png</span> <span style="color:#6c7086;">📋 列表切换</span>
├── <span style="color:#a6e3a1;">bt_lrc.png</span> <span style="color:#6c7086;">📜 歌词切换</span>
├── <span style="color:#a6e3a1;">bt_video.png</span> <span style="color:#6c7086;">🎬 视频切换</span>
├── <span style="color:#a6e3a1;">bt_option.png</span> <span style="color:#6c7086;">⚙️ 设置</span>
├── <span style="color:#a6e3a1;">bt_random.png</span> <span style="color:#6c7086;">🎲 随机</span>
├── <span style="color:#a6e3a1;">bt_repeat.png</span> <span style="color:#6c7086;">🔁 循环</span>
├── <span style="color:#a6e3a1;">bt_close.png</span> <span style="color:#6c7086;">✕ 关闭窗口 · 精确距右 6px (6R 原始坐标映射)</span>
│
├── <span style="color:#a6e3a1;">progress_track.png</span> <span style="color:#6c7086;">进度条轨道</span>
├── <span style="color:#a6e3a1;">volume_track.png</span> <span style="color:#6c7086;">音量条轨道</span>
│
├── <span style="color:#a6e3a1;">scrollbar_track.png</span> <span style="color:#6c7086;">滚动条轨道 · IIFE injectScrollbarCss 消费</span>
├── <span style="color:#a6e3a1;">scrollbar_thumb.png</span> <span style="color:#6c7086;">滚动条滑块 · IIFE injectScrollbarCss 消费</span>
└── <span style="color:#a6e3a1;">scrollbar_button.png</span> <span style="color:#6c7086;">滚动条箭头 · IIFE injectScrollbarCss 消费</span>
</div>
</div>
<hr style="border:0;border-top:1px solid #ddd;margin:50px 0;">
<h2 style="font-size:22px;font-weight:400;border-left:4px solid #1e90ff;padding-left:12px;margin-bottom:20px;">使用方式</h2>
<h3 style="font-size:15px;color:#333;margin-bottom:10px;">LMP34.init 配置</h3>
<div style="position:relative;background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:20px 24px;font-family:Consolas,'Courier New',monospace;font-size:13px;line-height:1.9;overflow-x:auto;">
<button onclick="navigator.clipboard.writeText(this.nextElementSibling.textContent);this.textContent='已复制 ✓';" style="position:absolute;top:10px;right:10px;background:#313244;color:#cdd6f4;border:1px solid #45475a;border-radius:4px;padding:4px 12px;font-family:inherit;font-size:12px;cursor:pointer;">复制</button>
<div style="white-space:pre-wrap;word-break:break-all;"><span style="color:#89b4fa;">skins:</span> <span style="color:#a6e3a1;">'skins/cmp4-wmp11',</span></div>
</div>
<h3 style="font-size:15px;color:#333;margin:20px 0 10px;">URL 参数切换</h3>
<div style="position:relative;background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:20px 24px;font-family:Consolas,'Courier New',monospace;font-size:13px;line-height:1.9;overflow-x:auto;">
<button onclick="navigator.clipboard.writeText(this.nextElementSibling.textContent);this.textContent='已复制 ✓';" style="position:absolute;top:10px;right:10px;background:#313244;color:#cdd6f4;border:1px solid #45475a;border-radius:4px;padding:4px 12px;font-family:inherit;font-size:12px;cursor:pointer;">复制</button>
<div style="white-space:pre-wrap;word-break:break-all;"><span style="color:#f38ba8;">?skin</span>=<span style="color:#a6e3a1;">skins/cmp4-wmp11</span></div>
</div>
<hr style="border:0;border-top:1px solid #ddd;margin:50px 0 30px 0;">
<p style="text-align:center;color:#888;font-size:12px;letter-spacing:3px;">CMP4-WMP11 · LMP34</p> 见到老式的播放器板面，感到很亲切！歌词部分很清晰！谢谢老师！辛苦了！ 这款播放器不错，功能强大！ 老师我微风网盘上传了你原皮肤一点没改，结果只有频谱和音乐和背景，控制面没有歌词没有！ 亚伦影音工作室 发表于 2026-10-22 16:20
见到老式的播放器板面，感到很亲切！歌词部分很清晰！谢谢老师！辛苦了！ ...
去购买个虚拟主机纯玩玩的话这个划算 几块钱一个月http://www.yunvhs.cn/ 亚伦影音工作室 发表于 2026-10-22 16:20
见到老式的播放器板面，感到很亲切！歌词部分很清晰！谢谢老师！辛苦了！ ...
我对播放器再次升级目标是支持远程 CMP4 那样的打包格式如果成功 就可实现这个我在摸索给我点时间 目前歌曲播放 主要是频谱部分全靠服务器代理我准备摘出来服务器流量吃不消
admin 发表于 2026-10-23 17:33
我对播放器再次升级目标是支持远程 CMP4 那样的打包格式如果成功 就可实现这个我在摸索给我点时间 ...
望老师再接再厉，更上一层楼！ 亚伦影音工作室 发表于 2026-10-23 19:08
望老师再接再厉，更上一层楼！
经过设计 不会做成 zip不是做不了我无法控制安全 怕人恶意文件放 zip包 我控制不了皮肤 还是以同一文件夹三个文件上传的地址https 开头 别做防盗链就可正常使用 已经做过测试 亚伦影音工作室 发表于 2026-10-23 19:08
望老师再接再厉，更上一层楼！
你做好皮肤 可以给我 我给你上传
页:
[1]