不能只讨论天气
<style>.mama { position: relative; left: -302px; width: 1200px; height: 801px; background: #ccc url('/data/attachment/forum/202206/12/214432ybzdy8ygu8os8j7d.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid { position: absolute; width: 1350px; height: 880px; object-fit: cover; opacity: 0.4; }
.lrcWrap { position: absolute; right: 0; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
.playbtn:hover { background: red; }
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
.pausebtn:hover { border-color: transparent red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 16px / 24px sans-serif; color: #ccc; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b519a8074c45.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img src="/data/attachment/forum/202206/12/214548frvrt7i0q0y4izol.jpg" alt="" style="position: absolute; width: 440px; height: 200px; right: 0; mix-blend-mode: darken" />
<div class="lrcWrap">
<p>鱼骨妹 不能只是讨论天气</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<div class="playbtn"></div>
<div class="pausebtn"></div>
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1941301543.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
playbtn = document.querySelector('.playbtn'),
pausebtn = document.querySelector('.pausebtn'),
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0;
let lrcAr = [
['0.00','作词 : 吴子健REmi'],
['0.10','作曲 : 吴子健REmi'],
['0.18','编曲 : 何明桦'],
['0.45','制作人 : 白昼星BZX'],
['0.82','出品：网易子弹x云上工作室'],
['1.13','电吉他：何明桦'],
['1.64','和声：鱼骨妹'],
['2.08','录音：鱼骨妹'],
['2.52','混音&母带：LBI利比'],
['2.85','策划：白昼星BZX'],
['3.20','监制：汤成君'],
['13.95','就牵手远离城市陪你远走旅行'],
['17.54','在下个弯躺在草地上 It\'s like a movie'],
['20.86','日出日落好像在追着你的轨迹'],
['24.38','伸出手就能穿过云层'],
['26.80','兜兜转转只是过程'],
['28.29','风吹过你的衣角对视突然安静'],
['31.37','我好像把一切一切一切全都忘记'],
['34.67','飘忽不定wo 在看哪里'],
['37.47','要怎么开口 下个话题'],
['39.21','不能只是讨论天气'],
['40.66','爱说不出口怎么给你'],
['42.39','ya有什么问题 我全部都可以对你坦白'],
['46.90','不止是all night 我所有温柔能把你掩埋'],
['49.90','我懂得你脾气 你生气时 会马上抱紧你ok'],
['53.42','别总是太在意 别人胡乱的猜测你'],
['55.77','他们都不懂'],
['57.10','yeye 好不容易才能遇见你'],
['60.28','没有刻意 爱总是流出的不经意'],
['63.99','找寻方向 一不小心让我找到了你'],
['67.24','所以珍惜 别再想无聊的过去'],
['74.87','脑海里都是两人份的场景'],
['81.12','说不出口的爱恋 别等到下雨天'],
['84.38','就牵手远离城市陪你远走旅行'],
['87.07','在下个弯躺在草地上 It\'s like a movie'],
['90.29','日出日落好像在追着你的轨迹'],
['93.88','伸出手就能穿过云层'],
['95.98','兜兜转转只是过程'],
['97.55','风吹过你的衣角对视突然安静'],
['100.90','我好像把一切一切一切全都忘记'],
['104.15','飘忽不定wo 在看哪里'],
['106.91','要怎么开口 下个话题'],
['108.78','不能只是讨论天气'],
['110.22','爱说不出口怎么给你'],
['112.00','你给的爱我从不嫌多 从不会闪躲'],
['114.78','有太多人都只是经过'],
['117.18','不像你在我的世界留下了 一场烟火'],
['120.68','浪漫的结果'],
['121.97','我开始变得不再沉默'],
['124.07','你陪我度过'],
['125.27','就牵手远离城市陪你远走旅行'],
['128.78','在下个弯躺在草地上 It\'s like a movie'],
['132.01','日出日落好像在追着你的轨迹'],
['135.70','伸出手就能穿过云层'],
['137.73','兜兜转转只是过程'],
['139.50','就牵手远离城市陪你远走旅行'],
['142.67','在下个弯躺在草地上 It\'s like a movie'],
['145.91','日出日落好像在追着你的轨迹'],
['149.54','伸出手就能穿过云层'],
['151.60','兜兜转转只是过程'],
['153.14','风吹过你的衣角对视突然安静'],
['156.52','我好像把一切一切一切全都忘记'],
['159.75','飘忽不定wo 在看哪里'],
['162.38','要怎么开口 下个话题'],
['164.18','不能只是讨论天气'],
['165.86','爱说不出口怎么给你']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = '#ccc';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = '#ccc';
lrcUl.style.top = 0;
})
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
let offset = (obj,direction) => {
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
let btnstate = (paused) => {
paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
aud.paused ? btnstate(1) : btnstate(0);
</script> 借用了 @红影 作品里的视频。主要想实现视频背景另外的但很普通的玩法：宽高大于父窗体以达成适合背景图片的目的。
同时测试一下播放器彻底融入背景的样式。
歌曲格调一般，但曲调有一定的特色。
这个厉害了，把视频融合到图片里，又得到一种新的视觉感受，真漂亮{:4_199:} 这个融合很巧妙，正好让海和山相接，非常棒。发现阔大视频后倒是正好让那个logo不可见了{:4_173:} 还有这样的歌曲，不能只讨论天气，那讨论什么呢{:4_170:} 图片和视频融合，黑黑总能带来很奇妙的思路{:4_199:} 红影 发表于 2022-6-12 22:05
图片和视频融合，黑黑总能带来很奇妙的思路
这个玩法简单，但它也有缺点：浏览器的画中画可以启动 红影 发表于 2022-6-12 22:04
还有这样的歌曲，不能只讨论天气，那讨论什么呢
一般地，讨论天气是礼节性的，表示不够亲密才只谈天气 红影 发表于 2022-6-12 22:03
这个融合很巧妙，正好让海和山相接，非常棒。发现阔大视频后倒是正好让那个logo不可见了
这也是功用之一 欣赏点赞！ 黑黑朋友早晨好！
精彩制作、雕玉双联，赞！赞！赞！
梦油 发表于 2022-6-13 11:33
黑黑朋友早晨好！
精彩制作、雕玉双联，赞！赞！赞！
感谢认可 马黑黑 发表于 2022-6-13 12:11
感谢认可
羡慕，还是羡慕。 马黑黑 发表于 2022-6-12 22:23
这个玩法简单，但它也有缺点：浏览器的画中画可以启动
没看到画中画啊，这单位里电脑和家里电脑看着都很正常{:4_187:} 马黑黑 发表于 2022-6-12 22:26
一般地，讨论天气是礼节性的，表示不够亲密才只谈天气
嗯嗯，也就是打哈哈的意思，譬如今天天气真好之类的。黑黑还挺懂的{:4_189:} 马黑黑 发表于 2022-6-12 22:26
这也是功用之一
聪明，原来弄掉那个有无数种方法啊{:4_173:} 红影 发表于 2022-6-12 22:04
还有这样的歌曲，不能只讨论天气，那讨论什么呢
讨论地气{:4_189:} 这个融合天衣无缝的啊，漂亮 绿叶清舟 发表于 2022-6-13 16:48
这个融合天衣无缝的啊，漂亮
一般般吧 红影 发表于 2022-6-13 15:33
聪明，原来弄掉那个有无数种方法啊
方法不止一种