王阳
7e5fc46126
- 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 演示页重做:深色现代设计,移除原项目链接
148 lines
5.4 KiB
HTML
148 lines
5.4 KiB
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>
|