相思渡口—帖赠队长 祝双节快乐！
<style>
#papa { left: -344px; width: 1280px; height: 722px; top: 150px; background: gray url('https://pic.imgdb.cn/item/631b156f16f2c2beb1b5fafa.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 80px; right: 350px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 500px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(0,200,200,.15); }
#tmsg { font: normal 16px sans-serif; color: #CCC;}
#lrc { position: absolute; left: 460px; bottom: 300px; font: bold 2em sans-serif; color: DarkSlateGray; text-shadow: 1px 1px 1px #CCC; text-align: center; }
#lrc:hover, #tmsg:hover { color: snow; }
#vid { position: absolute; width: 1280px; height: 805px; top: -65px; object-fit: cover; opacity: 0.15; }
#dt{ position: absolute; width: 544px; height: 333px; top: -20px; left: 150px; }
</style>
<div id="papa">
<img id="dt" src="https://pic.imgdb.cn/item/62f232a416f2c2beb1d93890.gif" alt="" />
<video id="vid" src="http://kvideo01.youju.sohu.com/ecb1910e-543a-4834-8863-1f39f77cc02b2_0_0.mp4 " muted="muted" autoplay="autoplay" loop="loop"></video>
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
<div id="lrc">相思渡口-祁隆</div>
</div>
<script>
let lrcAr = [
['0.00','相思渡口-祁隆'],
['6.46','祝队长双节快乐！'],
['12.92','祝队长双节快乐！'],
['19.72','喝一杯相思的酒'],
['24.59','不知过了几个春秋'],
['28.76','那场美丽的邂逅'],
['32.70','魂牵梦绕始终在心头'],
['38.00','孤帆飘零的小舟'],
['41.44','装满疲惫和忧愁'],
['46.20','不知何时能回头'],
['49.87','回到渡情驿站的路口'],
['54.53','你是否感应我的祈求'],
['58.78','回到驿站稍作停留'],
['63.01','别把承诺抛在脑后'],
['67.01','我一直在此孤独等候'],
['71.44','你是否感应我的祈求'],
['75.74','我的心已被你带走'],
['80.29','不管何时能够回头'],
['84.14','我依然守在相思的渡口'],
['88.68','LRC编辑：小辣椒'],
['123.11','春暖花开的时候'],
['127.10','仿佛看到你的温柔'],
['131.47','你我约定的渡口'],
['135.48','我依然在此苦苦的守候'],
['140.47','你是否感应我的祈求'],
['144.20','回到驿站稍作停留'],
['148.46','别把承诺抛在脑后'],
['152.71','我一直在此孤独等候'],
['157.16','你是否感应我的祈求'],
['161.35','我的心已被你带走'],
['165.70','不管何时能够回头'],
['169.77','我依然守在相思的渡口'],
['174.35','你是否感应我的祈求'],
['178.80','回到驿站稍作停留'],
['183.11','别把承诺抛在脑后'],
['187.04','我一直在此孤独等候'],
['192.10','你是否感应我的祈求'],
['196.04','我的心已被你带走'],
['200.42','不管何时能够回头'],
['204.10','我依然守在相思的渡口'],
['208.36','我依然守在相思的渡口'],
['227.28','我依然守在相思的渡口']
];
let aud = new Audio();
aud.src = 'https://wj1.zp68.com:812/lxx/yy/xsdk.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
</script>
<br><br><br><br><br><br><br><br><br><br> @加林森 队长不好意思，匆匆忙忙赶个礼物，图图做的不够漂亮 纯看心意了{:4_179:}
祝队长双节快乐~~ 这个播放器是黑黑分享的这些教程中，小辣椒最喜欢的之一，做一个送队长 谢谢队长一直以来对水区的付出，辛苦了 其实原来这个视频背景不是这个的，只是我自己空间上传后怕被盗链，换了现在这个，感觉效果是差了一点
队长不要嫌弃，笑纳了{:4_170:} 小辣椒 发表于 2022-9-9 20:39
@加林森
来了来了。 小辣椒 发表于 2022-9-9 20:39
队长不好意思，匆匆忙忙赶个礼物，图图做的不够漂亮
你太客气了。好漂亮的。背景还是视频的。真棒！{:4_204:}{:4_176:} 小辣椒 发表于 2022-9-9 20:40
纯看心意了
谢谢了，你真有心了。{:4_179:} 小辣椒 发表于 2022-9-9 20:40
祝队长双节快乐~~
嗯嗯，谢谢小辣椒了。{:4_204:} 小辣椒 发表于 2022-9-9 20:41
这个播放器是黑黑分享的这些教程中，小辣椒最喜欢的之一，做一个送队长
我想给你加精了。{:5_154:} 小辣椒 发表于 2022-9-9 20:41
谢谢队长一直以来对水区的付出，辛苦了
应该的应该的。不辛苦的。{:4_171:} 这是赤脚的跑得快，希望队长跟得上{:4_170:} 情景交融，非常和谐，师傅厉害！{:5_116:} 师傅可以把人物再处理一下，否则人物有透明感。。。。。 东篱闲人 发表于 2022-9-9 21:05
师傅可以把人物再处理一下，否则人物有透明感。。。。。
老头这个我不会，你教我 东篱闲人 发表于 2022-9-9 21:05
师傅可以把人物再处理一下，否则人物有透明感。。。。。
我视频透明度设置opacity: 0.15;
就因为这个视频背景有点黑
欣赏老师的精彩分享，歌好听图漂亮！{:4_204:}