wangyang/moeplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

阶段3:皮肤系统现代化

Browse Source 
- CSS 架构改为 src/css/base.css(结构+35个--moe-变量) + themes/(default/red/ixigua) 构建拼接
- 11 张 PNG 雪碧图全部删除,20+ 图标改为 SVG data-URI + CSS mask,颜色随主题变量
- 修复原 ckplayer 雪碧图 exitfull/next 共用图标 bug
- 视觉重做:渐变控制条/细轨道+圆点滑块进度条/圆角弹层/系统字体栈
- 默认皮肤深蓝 accent,ixigua 重做为浅色皮肤;播放器默认不再带品牌水印
- 修复中央播放键三角形不居中问题
- index.html 演示页重做:深色现代设计,移除原项目链接
This commit is contained in:
王阳
2026-07-21 14:34:05 +08:00
parent 639c37248d
commit 7e5fc46126
22 changed files with 6791 additions and 5013 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+147 -79
View File
@@ -1,79 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MoePlayer</title>
<link id="skin" type="text/css" rel="stylesheet" href="moeplayer/css/moeplayer.css" />
<!--
如果需要使用其它语言，请在此处引入相应的js,比如:<script type="text/javascript" src="moeplayer/language/en.js" charset="UTF-8"></script>
-->
<script type="text/javascript" src="moeplayer/js/moeplayer.min.js" charset="UTF-8"></script>
</head>
<body>
<div class="video" style="width: 100%; height: 500px;max-width: 800px;">播放容器</div>
<script>
//调用开始
var videoObject = {
container: '.video', //视频容器
poster:'video/poster.png',//封面图片
video:'video/lc.mp4'//视频地址
};
var player=new MoePlayer(videoObject)//调用播放器并赋值给变量player
/*
* ===============================================================================================
* 以上代码已完成调用演示，下方的代码是演示监听动作和外部控制的部分
* ===============================================================================================
* ===============================================================================================
*/
player.play(function(){
document.getElementById('state').innerHTML='监听到播放';
});
player.pause(function(){
document.getElementById('state').innerHTML='监听到暂停';
});
player.volume(function(vol){
document.getElementById('state').innerHTML='监听到音量改变：'+vol;
});
player.muted(function(b){
document.getElementById('state2').innerHTML='监听到静音状态：'+b;
});
player.full(function(b){
document.getElementById('state').innerHTML='监听到全屏状态：'+b;
});
player.ended(function(){
document.getElementById('state').innerHTML='监听到播放结束';
});
//皮肤切换:替换引入的CSS文件
function changeSkin(css){
document.getElementById('skin').href='moeplayer/css/'+css;
}
</script>
<p>以下链接指向原 ckplayer 项目：</p>
<p>官网：<a href="https://www.ckplayer.com" target="_blank">www.ckplayer.com</a></p>
<p>手册：<a href="https://www.ckplayer.com/manual/" target="_blank">www.ckplayer.com/manual/</a></p>
<p>社区：<a href="https://bbs.ckplayer.com/" target="_blank">bbs.ckplayer.com</a></p>
<p>全功能演示：<a href="https://www.ckplayer.com/demo.html" target="_blank">www.ckplayer.com/demo.html</a></p>
<p>皮肤切换：</p>
<p>
<button type="button" onclick="changeSkin('moeplayer.css')">默认</button>
<button type="button" onclick="changeSkin('moeplayer.red.css')">红色</button>
<button type="button" onclick="changeSkin('moeplayer.ixigua.css')">西瓜</button>
</p>
<p>控制示例：</p>
<p>
<button type="button" onclick="player.play()" >播放</button>
<button type="button" onclick="player.pause()" >暂停</button>
<button type="button" onclick="player.seek(20)" >跳转</button>
<button type="button" onclick="player.volume(0.6)">修改音量</button>
<button type="button" onclick="player.muted()">静音</button>
<button type="button" onclick="player.exitMuted()">恢复音量</button>
<button type="button" onclick="player.full()">全屏</button>
<button type="button" onclick="player.webFull()">页面全屏</button>
<button type="button" onclick="player.theatre()">剧场模式</button>
<button type="button" onclick="player.exitTheatre()">退出剧场模式</button>
</p>
<p id="state"></p>
<p id="state2"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MoePlayer - 中文友好的网页视频播放器</title>
<link id="skin" type="text/css" rel="stylesheet" href="moeplayer/css/moeplayer.css" />
<!--
如果需要使用其它语言，请在此处引入相应的js,比如:<script type="text/javascript" src="moeplayer/language/en.js" charset="UTF-8"></script>
-->
<script type="text/javascript" src="moeplayer/js/moeplayer.min.js" charset="UTF-8"></script>
<style>
/* ===== 演示页样式,与播放器无关 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
background: #0f1216;
color: #d7dde5;
min-height: 100vh;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 40px 20px 60px; }
header { text-align: center; margin-bottom: 32px; }
header h1 { font-size: 32px; color: #fff; letter-spacing: 1px; }
header h1 em { color: #00a1d6; font-style: normal; }
header p { margin-top: 8px; color: #8a94a3; font-size: 14px; }
.player-card {
background: #171c23;
border: 1px solid #232a35;
border-radius: 12px;
padding: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.video { width: 100%; height: 460px; border-radius: 8px; overflow: hidden; }
section { margin-top: 28px; }
section h2 {
font-size: 14px; color: #8a94a3; font-weight: 600;
text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
}
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btns button {
background: #1f2630; color: #d7dde5;
border: 1px solid #2c3644; border-radius: 6px;
padding: 8px 16px; font-size: 13px; cursor: pointer;
transition: all .15s;
}
.btns button:hover { background: #00a1d6; border-color: #00a1d6; color: #fff; }
.state {
margin-top: 14px; padding: 10px 14px;
background: #171c23; border: 1px solid #232a35; border-radius: 8px;
font-size: 13px; color: #00a1d6; min-height: 40px; line-height: 20px;
}
footer {
margin-top: 40px; text-align: center;
font-size: 12px; color: #5c6675; line-height: 1.9;
}
footer a { color: #8a94a3; }
@media (max-width: 600px) {
.video { height: 240px; }
header h1 { font-size: 24px; }
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1><em>Moe</em>Player</h1>
<p>中文友好的网页视频播放器 · mp4 / flv / m3u8 / ts · PC 与移动端 H5</p>
</header>
<div class="player-card">
<div class="video">播放容器</div>
</div>
<section>
<h2>皮肤切换</h2>
<div class="btns">
<button type="button" onclick="changeSkin('moeplayer.css')">默认</button>
<button type="button" onclick="changeSkin('moeplayer.red.css')">红色</button>
<button type="button" onclick="changeSkin('moeplayer.ixigua.css')">西瓜</button>
</div>
</section>
<section>
<h2>控制示例</h2>
<div class="btns">
<button type="button" onclick="player.play()">播放</button>
<button type="button" onclick="player.pause()">暂停</button>
<button type="button" onclick="player.seek(20)">跳转 20s</button>
<button type="button" onclick="player.volume(0.6)">音量 0.6</button>
<button type="button" onclick="player.muted()">静音</button>
<button type="button" onclick="player.exitMuted()">恢复音量</button>
<button type="button" onclick="player.full()">全屏</button>
<button type="button" onclick="player.webFull()">页面全屏</button>
<button type="button" onclick="player.theatre()">剧场模式</button>
<button type="button" onclick="player.exitTheatre()">退出剧场</button>
</div>
</section>
<section>
<h2>事件监听</h2>
<div class="state" id="state">等待播放器事件…</div>
<div class="state" id="state2" style="margin-top:8px"></div>
</section>
<footer>
<p>MoePlayer · MIT 开源协议 · fork 自 <a href="https://www.ckplayer.com" target="_blank" rel="noopener">ckplayer</a>,感谢原作者 niandeng</p>
</footer>
</div>
<script>
//调用开始
var videoObject = {
container: '.video', //视频容器
poster:'video/poster.png',//封面图片
video:'video/lc.mp4'//视频地址
};
var player=new MoePlayer(videoObject)//调用播放器并赋值给变量player
//皮肤切换:替换引入的CSS文件
function changeSkin(css){
document.getElementById('skin').href='moeplayer/css/'+css;
}
/*
* ===============================================================================================
* 以下代码演示监听动作和外部控制
* ===============================================================================================
*/
player.play(function(){
document.getElementById('state').innerHTML='监听到播放';
});
player.pause(function(){
document.getElementById('state').innerHTML='监听到暂停';
});
player.volume(function(vol){
document.getElementById('state').innerHTML='监听到音量改变：'+vol;
});
player.muted(function(b){
document.getElementById('state2').innerHTML='监听到静音状态：'+b;
});
player.full(function(b){
document.getElementById('state').innerHTML='监听到全屏状态：'+b;
});
player.ended(function(){
document.getElementById('state').innerHTML='监听到播放结束';
});
</script>
</body>
</html>