2024年6月17日 星期一
<style>
#tz { margin: 20px auto; width: 960px; height: 600px; background: #eee; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; pointer-events: none; }
#tz::before, #tz::after { content: ''; position: absolute; }
#tz::before { content: attr(data-lrc); bottom: 0; width: 100%; height: 60px; background: repeating-linear-gradient(to right, red, green, blue, green, red) center/200px; -webkit-background-clip: text; color: transparent; font: normal 2em sans-serif; display: grid; place-items: center; }
#tz::after { left: calc(50% - 70px); top: 10px; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; pointer-events: auto; }
.vid { position: absolute; width: 960px; height: 540px; }
.vid:nth-of-type(2) { right: 5px; top: 5px; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 60px black; cursor: pointer; pointer-events: auto; }
</style>
<div id="tz" data-lrc="HUACHAO PLAYER">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2164190769" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6c5933022.mp4" autoplay loop muted disablePictureInPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec3ab75a31.mp4" autoplay loop muted disablePictureInPicture></video>
</div>
<script>
var curkey = 0;
var vids = document.querySelectorAll('.vid');
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr[curkey][0]) {
tz.dataset.lrc = lrcAr[curkey][1];
curkey ++;
}
};
aud.onseeked = () => curkey = 0;
tz.onclick = () => {
aud.paused ? aud.play() : aud.pause();
vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
vids[1].oncontextmenu = (e) => e.preventDefault();
let lrcAr = [ [0.1,"Never give up this feeling"], [3.53,"Never give up on love"], [7.7,"You can give up on me"], [11.29,"But never give up our love"], [15.73,"In our bodies and in our bones"], [19.23,"We both sing in deeper tones"], [23.16,"Into the fire we both run to hide"], [29.87,"And you let the sun call my name"], [34.11,"And we dance in her flames"], [37.75,"So warm"], [39.52,"I feel love love love"], [43.27,"Do you feel love"], [46.23,"You got me burning"], [50.63,"But I can't stop"], [53.51,"It feels like I need it"], [65.45,"But I can't stop"], [68.71,"It feels like I need it"], [81.2,"Never give up this feeling"], [84.83,"Never give up on love"], [88.64,"You can give up on me"], [92.16,"But never give up on love"], [95.94,"Never give up this feeling"], [99.56,"Never give up on love"], [103.4,"You can give up on me"], [106.91,"But never give up on love"], [109.8,"Do you feel love?"], [112.68,"You got me burning"], [117.12,"But I can't stop"], [120.23,"It feels like I need it"], [125.4,"Never give up this feeling"], [129.27,"Never give up on love"], [132.01,"But I can't stop"], [134.99,"It feels like I need it"], [140.3,"I believe in bleeding for love"], [147.56,"I believe in bleeding for love"], [155.09,"Never give up this feeling"], [158.74,"Never give up on love"], [162.6,"You can give up on me"], [166.13,"But never give up on love"], [169.95,"You can give up on me"], [173.3,"Just never give up on love"] ];
</script>
|
发表于 2024-6-14 21:01
可当不得老师的谢。。给老师上酒。。
不当。。
