支持长标题的遥控器

马黑黑 · 发表于 2023-3-25 18:12

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

HCPlayer 花潮在线播放器 00:00
00:00

马黑黑 · 发表于 2023-3-25 18:12

@小辣椒

马黑黑 · 发表于 2023-3-25 18:13

代码

<style>
#mplayer {
width: 100px;
height: 160px;
color: lightblue;
font-size: 14px;
background: linear-gradient(to right bottom,black,tan);
border-radius: 4px;
box-shadow: 2px 2px 6px black;
transition: .6s;
position: absolute;
pointer-events: none;
--state: running;
}
#mplayer::before {
position: absolute;
content: '';
width: 30px;
height: 30px;
left: calc(50% - 15px);
bottom: 15px;
border-radius: 50%;
background: #333;
pointer-events: auto;
cursor: pointer;
border: 2px solid lightblue;
box-shadow: 0 0 10px white inset, 0 0 10px white;
animation: flash .3s infinite alternate var(--state);
}
.wrap {
position: absolute;
background: #333;
padding: 6px;
top: 6px; right: 6px; bottom: 60px; left: 6px;
overflow: hidden;
}
#tit {
position: absolute;
white-space: nowrap;
animation: fly 6s linear infinite var(--state);
}
#ttmsg {
position: absolute;
top: 36px; right: 6px; bottom: 60px; left: 6px;
background: #333;
text-align: center;
padding: 4px;
}
@keyframes fly { to { transform: translate(-150%); } }
@keyframes flash { to { box-shadow: 0 0 50px #333 inset, 0 0 10px white; } }
</style>
<div id="mplayer">
<div class="wrap">
<span id="tit">HCPlayer 花潮在线播放器</span>
<span id="ttmsg">00:00<br>00:00</span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=865851473" autoplay loop></audio>
<script>
tit.style.right = -1*tit.offsetWidth + 'px';
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => ttmsg.innerHTML = toMin(aud.duration) + '<br>' + toMin(aud.currentTime));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>