学习黑黑老师播放器《异地相思空叹息》
<div class="t_fsz"><table cellspacing="0" cellpadding="0">
<style>
.mama { left: -214px; width: 1024px; height: 600px; background: lightblue url('https://s1.ax1x.com/2022/06/14/XIEpV0.jpg') no-repeat center / cover; position: relative; overflow: hidden;}
.vid { position: absolute; width: 100%; height: 800px; top: -200px; object-fit: cover; opacity: .35;}
.wrap { left: 20px; bottom: 20px; width: fit-content; height: fit-content; padding: 10px; display: flex;align-items: center; gap: 8px; background: rgba(255,255,255,.4) linear-gradient(to right bottom, rgba(0,0,0,.75),rgba(255,255,255,.4)); box-shadow: 2px 2px 2px #000; position: absolute; }
.lrcbox { min-width: 360px; font: normal 1.1em / 1.5em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
.progress { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: conic-gradient(from 180deg,tan 0%,transparent 0%); cursor: pointer; position: relative; }
.progress::before { position: absolute; content: attr(data-per); width: 100%; height: 100%; border-radius: 50%; background: transparent radial-gradient(#eee,transparent); text-align: center; font: normal 15px / 90px sans-serif; }
.lighten { color: #ADFEDC; font-weight: bold; font-size: 1.2em; }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/13/5b514e39921d5.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="wrap">
<div class="progress" data-per="0%"></div>
<div class="lrcbox"> Loading ...</div>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=224078007&.mp3" autoplay="autoplay" loop="loop">old browser</audio>
<script>
let lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
progress = document.querySelector('.progress');
let lrcAr = [
['0.96','异地相思空叹息'],
['3.62','作词：杨美华/冉冉升华'],
['6.74','作曲：杨美华/冉冉升华'],
['9.35','演唱：杨美华'],
['12.36','LRC编辑：醉美水芙蓉 '],
['23.53','杨柳随风轻摆摇曳'],
['27.86','我在河边想念着你'],
['32.25','虽然两情难已忘记'],
['36.75','异地相思空空叹息'],
['41.17','夕阳落幕渐渐向西'],
['45.62','悠悠的晚风吹向你'],
['50.08','良辰美景多么美丽'],
['54.57','却不知道你在哪里'],
['58.98','回想起曾经的点滴'],
['63.39','深深埋在我的心里'],
['67.89','对你思念没有停息'],
['72.33','随风飘向远方的你'],
['76.81','期待着再一次相聚'],
['81.25','卿卿我我多么甜蜜'],
['85.72','但愿两情相牵相依'],
['90.10','一生一世永不分离'],
['115.10',' '],
['116.79','夕阳落幕渐渐向西'],
['121.18','悠悠的晚风吹向你'],
['125.64','良辰美景多么美丽'],
['130.09','却不知道你在哪里'],
['134.56','回想起曾经的点滴'],
['139.00','深深埋在我的心里'],
['143.45','对你思念没有停息'],
['147.81','随风飘向远方的你'],
['152.37','期待着再一次相聚'],
['156.77','卿卿我我多么甜蜜'],
['161.22','但愿两情相牵相依'],
['165.60','一生一世永不分离'],
['170.17','回想起曾经的点滴'],
['174.53','深深埋在我的心里'],
['179.03','对你思念没有停息'],
['183.39','随风飘向远方的你'],
['187.90','期待着再一次相聚'],
['192.37','卿卿我我多么甜蜜'],
['196.82','但愿两情相牵相依'],
['201.27','一生一世永不分离'],
['205.99','一生一世永不分离'],
['213.45','谢谢欣赏！']
];
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime, str = '';
setProgress(aud.duration,tt);
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
if(j > 0) str = lrcAr + '<br>';
str += '<span class="lighten">' + lrcAr + '</span>';
if(j < lrcAr.length - 1) str += '<br>' + lrcAr;
lrcbox.innerHTML = str;
}
}
})
progress.onclick = () => aud.paused ? aud.play() : aud.pause();
function setProgress(task,current) {
if(task <= 0 || current <= 0) return false;
let prog = 100 * current / task;
progress.style.background = `conic-gradient(from 180deg,tan ${prog}%,transparent ${prog}%)`;
progress.setAttribute('data-per',prog.toFixed(2) + '%');
}
</script></td></tr></table> 芙蓉手快呀。好腻害，画风很美 马黑黑 发表于 2022-6-14 22:16
芙蓉手快呀。好腻害，画风很美
不知道毛玻璃怎么换颜色？瞎换了个！ 这个制作好漂亮，视频和图图完美结合，非常美妙{:4_187:} 醉美水芙蓉 发表于 2022-6-14 22:25
不知道毛玻璃怎么换颜色？瞎换了个！
挺好的，换的不错 颜色调得很协调，这个做得真好，给水芙蓉点赞{:4_187:} 做得真好，画面协和，整体美感。 红影 发表于 2022-6-14 22:27
这个制作好漂亮，视频和图图完美结合，非常美妙
谢谢红影支持！ 樵歌 发表于 2022-6-15 06:33
做得真好，画面协和，整体美感。
谢谢樵歌支持！ 马黑黑 发表于 2022-6-14 22:29
挺好的，换的不错
还是黑黑老师的播放器好看！论坛有你更精彩！ 醉美水芙蓉 发表于 2022-6-15 07:05
还是黑黑老师的播放器好看！论坛有你更精彩！
你的配色更漂亮呢，交融性恰到好处。论坛有大家才精彩。 醉美水芙蓉 发表于 2022-6-15 07:04
谢谢樵歌支持！
得先谢谢你嘞，做这么好图图和歌儿供俺们欣赏{:4_204:} 醉美水芙蓉 发表于 2022-6-15 07:04
谢谢红影支持！
不客气啊，水芙蓉学得很好呢{:4_199:}
页:
[1]