我和我的祖国（学习黑黑视频背景套一个）
<style>.mnBox { left: -340px; width: 1280px; height: 700px; top:150px;position: relative; overflow: hidden; }
.mnBox::after { position: absolute; content: ''; width: 100%; height: 100%; background: transparent; z-index: 101; }
.video { width: 100%; height: 100%; object-fit: cover; position: absolute; }
.lrcWrap { position: absolute; padding: 430px; width: fit-content; height: fit-content; text-align: center; display: flex; flex-direction: column; z-index: 102;}
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: olive; color: #ccc; border: none; font-size: 14px; outline: none; cursor: pointer; }
.btn:hover { color: red; }
.meter { position: relative; width:350px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: olive; }
.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: 370px; 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 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mnBox">
<video class="video" src="https://s138.ananas.chaoxing.com/sv-w8/video/54/8d/66/90fce70ff8dce42431018f4f4e0e0db9/sd.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="lrcWrap">
<p>我和我的祖国</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<input class="btn" type="button" value="||" />
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://s1.ananas.chaoxing.com/sv-w3/audio/70/d3/d6/04244c1c27e571216d75592854c0e32e/audio.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
btn = document.querySelector('.btn');
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 9;
let lrcAr = [
['10.37','我和我的祖国演唱：王菲'],
['25.15','LRC歌词编辑：小辣椒'],
['35.57','我和我的祖国一刻也不能分割'],
['43.87','无论我走到哪里都流出一首赞歌'],
['52.76','我歌唱每一座高山我歌唱每一条河'],
['60.43','袅袅炊烟小小村落路上一道辙'],
['72.81','啦......啦......'],
['83.60','你用你那母亲的脉搏和我诉说'],
['98.86','我的祖国和我像海和浪花一朵'],
['107.75','浪是海的赤子海是那浪的依托'],
['116.32','每当大海在微笑我就是笑的旋涡'],
['125.82','我分担着海的忧愁分享海的欢乐'],
['138.81','啦…..啦…..'],
['146.29','永远给我碧浪清波心中的歌'],
['160.88','啦…….啦…….'],
['170.45','永远给我碧浪清波心中的歌'],
['187.00','谢谢欣赏']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li style="list-style-type: none" id="li' + lrcAr + '">' + 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 = 'gray';
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 = 'gray';
lrcUl.style.top = 0;
});
aud.addEventListener('pause', () => btn.value = '\u25BA');
aud.addEventListener('play',() => btn.value = '||');
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
btn.onclick = () => aud.paused ? (aud.play(),btn.value = '||') : (aud.pause(),btn.value = '\u25BA');
function 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;
}
btn.value = aud.paused ? '\u25BA' : '||';
</script>
<br><br><br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑 我又偷懒了，直接做个最简单的视频背景歌词同步，交作业了。 午睡后再做昨天那个了。下了 很大气，飞舞的红旗真漂亮。歌词同步也做得好{:4_187:} 这个歌词好像还有小点点，黑黑说在JS 代码中加入：style = "list-style-type: none; "就没有小点点了{:4_187:} 小辣椒 发表于 2022-6-11 13:26
午睡后再做昨天那个了。下了
看到午睡两字，我也困了，睡觉去{:4_173:} 这个版本的我和我的祖国特别悠然，不像别的版本那么叫{:4_204:} 这个放在七一发挺好的 小辣椒朋友下午好！
五星红旗是祖国的骄傲,我向五星红旗敬礼。我爱你鲜艳的五星红旗，我爱你伟大的祖国! 立正，敬礼！献花！{:4_204:} 红影 发表于 2022-6-11 14:06
这个歌词好像还有小点点，黑黑说在JS 代码中加入：style = "list-style-type: none; "就没有小点点了{:4_18 ...
亲爱的，哪里有小点点？我没有看见啊 红影 发表于 2022-6-11 14:05
很大气，飞舞的红旗真漂亮。歌词同步也做得好
偷懒的制作，这个也是算秒做了，直接套用黑黑的 红影 发表于 2022-6-11 14:08
这个版本的我和我的祖国特别悠然，不像别的版本那么叫
其实我不喜欢王菲。。。。这 是有现成的这个歌曲就用了{:4_173:} 马黑黑 发表于 2022-6-11 14:29
这个放在七一发挺好的
黑黑，做这个歌词同步，发现我这个歌词字数特别多，没有找到这个播放器进度表的修改地方，直接把文字移动了30 否则文字太靠右边了 梦油 发表于 2022-6-11 15:23
小辣椒朋友下午好！
五星红旗是祖国的骄傲,我向五星红旗敬礼。我爱你鲜艳的五星红旗，我爱你伟大的祖国!
谢谢梦油，一起为祖国骄傲{:4_187:} 加林森 发表于 2022-6-11 16:17
立正，敬礼！献花！
哈哈，队长看见国旗就肃然起敬了{:4_187:} 小辣椒 发表于 2022-6-11 16:46
哈哈，队长看见国旗就肃然起敬了
是啊。必须的。也习惯了。{:4_189:} 加林森 发表于 2022-6-11 17:11
是啊。必须的。也习惯了。
主要队长是冒号的{:4_189:}
小辣椒 发表于 2022-6-11 16:46
谢谢梦油，一起为祖国骄傲
这个帖子在做些修改，用在“十·一”再好不过了。
页:
[1]
2