醉美水芙蓉 发表于 2023-11-24 22:13

有的人注定擦肩而过

<style type="text/css">
#papa{position: relative;width:1164px;height: 640px;MARGIN-LEFT:-290px;margin-top:13px;box-shadow:0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;overflow:hidden;border-radius:0%;background:#000000 }
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1; z-index: 3;filter:hue-rotate(0deg)contrast(180%)brightness(100%);}
#vid1 { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1; z-index: 3;mix-blend-mode: lighten;}
#mplayer{top:65%; left:85%;z-index: 93;
position: absolute;
font: normal 7em/0em serif;
color:#ff0000;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

</style>
<div id="papa">
<video id="vid"src=""muted autoplaywidth="100%"></video>
<video id="vid1"src="https://imgs-qn.51miz.com/preview/video/00/00/12/73/V-127308-7D06A40E.mp4"muted autoplaywidth="100%"loop></video>
<div id="mplayer">❊</div>
<div data-lrc=" " id="lrc"> </div>
      </div>

<audio src="https://www.qqmc.com/mp3/music292949521.mp3" loop autoplay id="aud"></audio>
<script>
var muAr =[ ["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/398d2129cce12d8d6e0ba6b6b26175d4_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c30e5d6f464d8fdea7f9954d73571910_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/63c05b08fda9e0a91970f99793c29931_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ab3c4dcdf625245d97ace90a0f262001_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/f5ef9f6b7e00563fb599b5ab3b1458e8_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/765c7bf95d6185fac166d8ad0e4dfe92_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/2304fe2678886c59189953f305174a5d_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d37d550b37c346116182b13aceb47d58_preview.mp4"],
["https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6f55f58d6dee0dcbd6114e8dbc24d900_preview.mp4"]
];

var str= document.getElementById('');
var playIdx = 0;
for(j=0; j<muAr.length; j++) {
      str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
function iPlay(idx){
      playIdx = idx;
       vid.src = muAr;
      vid.play();
      nameRed(playIdx);
}
vid.onended = function() {
      playIdx ++;
      if(playIdx >= muAr.length) playIdx = 0;
vid.src = muAr;
    vid.play();
nameRed(playIdx);
}
iPlay(playIdx);
</script>


<script>
/*控制视频*/
vid=document.querySelector('#vid'),vid1=document.querySelector('#vid1');
mplayer.onclick =function() { aud.paused ?(vid.play(),vid1.play()):( vid.pause(), vid1.pause()) };
/*结束*/
/*控制视频*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文隶书;
        color: #000078;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
       
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `有的人注定擦肩而过（Live 合唱版）
演唱：王超然
作词：孙放
作曲：孙放
编曲：江苏孙放文化团队
和声：雪无影
合唱：孙放文化团队
混音/母带工程: 孙放文化
监制：孙家山
制作人：孙家山
出品人：孙家山
LRC编辑：醉美水芙蓉
有的人深夜里买醉
有的人哭到崩溃
有的人诉说他的狼狈
有的人意冷心灰
有的人爱的太卑微
良言难劝的鬼
有人说爱过就不后悔
转身却偷擦眼泪
有的人注定擦肩而过
被困在感情旋涡
没勇气面对以后的生活
到哪里才是解脱
有的人注定擦肩而过
走着走着就散了
找寻着各自想要的生活
回忆随风飘落
有的人深夜里买醉
有的人哭到崩溃
有的人诉说他的狼狈
有的人意冷心灰
有的人爱的太卑微
良言难劝的鬼
有人说爱过就不后悔
转身却偷擦眼泪
有的人注定擦肩而过
被困在感情旋涡
没勇气面对以后的生活
到哪里才是解脱
有的人注定擦肩而过
走着走着就散了
找寻着各自想要的生活
回忆随风飘落
谢谢欣赏！
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

红影 发表于 2023-11-25 08:56

漂亮的视频轮播，好听的歌儿，歌词同步也做得好。
欣赏水芙蓉美女好帖{:4_199:}

世外桃源 发表于 2023-11-25 09:29

这个制作好看{:4_204:}

世外桃源 发表于 2023-11-25 09:29

好听又好看，感谢楼主分享。

世外桃源 发表于 2023-11-25 09:30

继续欣赏。

幸运草 发表于 2023-11-25 10:31

好看{:6_244:}

马黑黑 发表于 2023-11-25 11:42

过

醉美水芙蓉 发表于 2023-11-25 12:02

红影 发表于 2023-11-25 08:56
漂亮的视频轮播，好听的歌儿，歌词同步也做得好。
欣赏水芙蓉美女好帖

谢谢红影美女支持！

醉美水芙蓉 发表于 2023-11-25 12:03

世外桃源 发表于 2023-11-25 09:29
好听又好看，感谢楼主分享。

谢谢朋友支持！

醉美水芙蓉 发表于 2023-11-25 12:03

幸运草 发表于 2023-11-25 10:31
好看

谢谢朋友支持！

醉美水芙蓉 发表于 2023-11-25 12:04

马黑黑 发表于 2023-11-25 11:42
过

谢谢老师光临！

幸运草 发表于 2023-11-25 12:27

醉美水芙蓉 发表于 2023-11-25 12:03
谢谢朋友支持！

不客气{:6_244:}

红影 发表于 2023-11-25 14:25

醉美水芙蓉 发表于 2023-11-25 12:02
谢谢红影美女支持！

问好水芙蓉美女，周六愉快{:4_187:}

马黑黑 发表于 2023-11-25 21:24

醉美水芙蓉 发表于 2023-11-25 12:04
谢谢老师光临！

{:4_190:}
页: [1]
查看完整版本: 有的人注定擦肩而过