饮尽岁月一壶酒-影子（学习黑黑《花妖记》滑杆三角按钮效果）
<style>#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
position: relative;
}
#mama > video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.xiankuang {
position: absolute;
width: 100%;
height:100%;
background: url('https://pic.imgdb.cn/item/66ca93e1d9c307b7e95e6703.png') no-repeat center/cover;
}
</style>
<div id="mama" class="mama">
<audio src="https://file.uhsea.com/2408/2c1e6776200af612c1acda3c1bc565e466.mp3" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2405811/00/36/80/5fdded34411fb.mp4" autoplay loop muted></video>
<div class="xiankuang"></div>
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/huakuai_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
player_css: 'left: 140px; bottom: 10px; --ww: 240px; --slider: #901889; --track: #f6d5f4; --prog: #a72fa1; --color: #901889',
lrc_css: 'left: 60px; top: 40px; --bg: url("https://pic.imgdb.cn/item/66caaf99d9c307b7e97df388.gif"); color: #fae5f9; font: bold 3.3em KaiTi;',
fs_css: 'right: 20px; bottom: 20px; --bg: transparent; --color: #eee;',
});
};
var geci = `
饮尽岁月一壶酒-影子
词：徐智渊 曲：李勇军
学习黑黑滑杆播放器
感谢黑黑的代码
又一个和岁月相关的
送给岁月·如歌
饮尽岁月一壶酒
千杯进肚泪双流
颠沛流离几时休
酷熬日月霜染头
岁月相伴几十秋
杯中有喜也有忧
半醉半醒心中愁
一壶老酒难入喉
饮尽岁月一壶酒
人生百味谁看透
碎银几两苦中求
岁月茫茫月悠悠
饮尽岁月一壶酒
山水无忧风起皱
功名利禄谁带走
酸甜苦辣去感受
岁月相伴几十秋
杯中有喜也有忧
半醉半醒心中愁
一壶老酒难入喉
饮尽岁月一壶酒
人生百味谁看透
碎银几两苦中求
岁月茫茫月悠悠
饮尽岁月一壶酒
山水无忧风起皱
功名利禄谁带走
酸甜苦辣去感受
酸甜苦辣去感受
`;
</script> 本来想把歌词放上面，把播放器放在下面那白乎乎的栏杆上，后来感觉还是放一起吧，便于看着歌词快进或暂停的操作。继续学些个原生歌词封装。感谢黑黑的代码@马黑黑 {:4_187:} 发现这歌手唱的歌曲带岁月两字的太多，还有岁月是一本书，把岁月熬成酒什么的，笑，那么巧的。
把这首送给岁月如歌，@岁月·如歌 一起喝点{:4_191:} 反正要上传图片，索性把图片上加块补丁，可以直接遮挡LOGO了，上次传图图时忘了这个了{:4_173:} 正在打哈欠，忽然精神一振，点开花潮，影子的歌，影子的礼物。真好！{:4_199:} 红影 发表于 2024-8-25 12:47
发现这歌手唱的歌曲带岁月两字的太多，还有岁月是一本书，把岁月熬成酒什么的，笑，那么巧的。
把这首送给 ...
举杯邀明月，两影成四位，不醉不归{:4_189:} 黄衣美女，金色向日葵，相映成趣，精美制作！赞！{:4_204:} 岁月·如歌 发表于 2024-8-25 12:59
正在打哈欠，忽然精神一振，点开花潮，影子的歌，影子的礼物。真好！
是歌手影子的歌，是坛友影子的礼物，这两者还得分一下才好{:4_173:} 红影 发表于 2024-8-25 12:50
反正要上传图片，索性把图片上加块补丁，可以直接遮挡LOGO了，上次传图图时忘了这个了
巧妙 红影 发表于 2024-8-25 12:46
本来想把歌词放上面，把播放器放在下面那白乎乎的栏杆上，后来感觉还是放一起吧，便于看着歌词快进或暂停的 ...
最初的设想才是最好的 岁月·如歌 发表于 2024-8-25 13:01
举杯邀明月，两影成四位，不醉不归
两影成四位，哈哈，你的思维那么活跃，说改就改啊{:4_173:} 岁月·如歌 发表于 2024-8-25 13:04
黄衣美女，金色向日葵，相映成趣，精美制作！赞！
还真是根据视频去找的图片，这都被你知道了啊{:4_196:} 马黑黑 发表于 2024-8-25 13:09
巧妙
当然不是另外需要加图片时用不上这招{:4_173:} 马黑黑 发表于 2024-8-25 13:09
最初的设想才是最好的
好的，那我再拿下来{:4_204:} 马黑黑 发表于 2024-8-25 13:09
最初的设想才是最好的
拿下来了，因为记得之前调过的位置，所以拿下来特别方便。
果然，还是分开来的好，也让下面栏杆白乎乎的不那么难受了，仿佛就是留着放播放器的{:4_173:} 布局合理，欣赏佳作，谢谢分享！ https://img.soogif.com/0rIjPl4EnDGYyZ3SHLb6St3XlqGSfK1P.gif 亲爱的，这个播放器颜色配的真漂亮{:4_199:} 画面特别靓丽，就佩服你们找视频这么的合适，和背景极配 欣赏亲爱的精彩的制作，你太聪明了，这个背景图图的补丁太好了{:4_173:}