论坛 › 欢乐水吧 › 天高任鸟飞（DJ 默涵版）-侯泽润[视频切换可控]

亚伦影音工作室 发表于 2023-9-19 09:38

天高任鸟飞（DJ 默涵版）-侯泽润[视频切换可控]

本帖最后由 亚伦影音工作室 于 2023-9-19 09:42 编辑 <br /><br /><style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background:#000000 ;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        left: calc(5% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #cccccc;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 12px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }

#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}

</style>

<div id="papa">

<span id="fullscreen">全屏</span>
<div id="mb"></div>
<video id="vid"src="https://img.tukuppt.com/video_show/2421007/00/01/98/5b4ec1ba174a6.mp4" muted autoplay></video>

<div id="mplayer"></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>

<audio id="aud" src="https://www.qqmc.com/mp3/music284578732.mp3" loop autoplay></audio>


<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: 94%;
        font:normal 2em 华文隶书;
        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 = `天高任鸟飞（DJ 默涵版）-侯泽润
作词：泽国同学
作曲：泽国同学
编曲/混音：DJ 默涵
企划：泽国同学
当年的你总是自恃清高
执意想要与我 分道扬镳
如今我自在却也逍遥
所幸比你 棋高一招
当年的你总是自恃清高
执意想要与我分道扬镳
如今你又把谁当成依靠
我已经对你不再怀念 不再计较
我知道天高任鸟飞
也知道话说三遍 淡如水
所以山水一程 再不相逢
只求爱过不后悔
我知道香烟燃尽皆成灰
也知道酒过三巡必是醉
尽管伤痕累累 事与愿违
尽管身边没有人陪
当年的你总是自恃清高
执意想要与我 分道扬镳
如今我自在却也逍遥
所幸比你 棋高一招
当年的你总是自恃清高
执意想要与我分道扬镳
如今你又把谁当成依靠
我已经对你不再怀念 不再计较
我知道香烟燃尽皆成灰
也知道酒过三巡必是醉
尽管伤痕累累 事与愿违
尽管身边没有人陪
当年的你总是自恃清高
执意想要与我 分道扬镳
如今我自在却也逍遥
所幸比你 棋高一招
当年的你总是自恃清高
执意想要与我分道扬镳
如今你又把谁当成依靠
我已经对你不再怀念 不再计较
`;

/*变量 ：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); /*获得歌词数组*/
})();
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };

(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);})();

setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

<script>


var dts = ["https://img.tukuppt.com/video_show/15653652/00/33/20/5fc466f64bcb6.mp4",
"https://img.tukuppt.com/video_show/15653652/00/33/20/5fc466f64bcb6.mp4",
"https://img.tukuppt.com/video_show/2475824/00/01/33/5b403f63f0a98.mp4",
"https://img.tukuppt.com/video_show/2402760/00/01/31/5b3f2648d3eaa.mp4",
"https://img.tukuppt.com/video_show/2269348/00/01/47/5b4400fada3a0.mp4",
"https://img.tukuppt.com/video_show/2475824/00/01/58/5b46b44249e6b.mp4",
"https://img.tukuppt.com/video_show/2629112/00/01/31/5b3f253fc2c79.mp4",
"https://video-js.51miz.com/preview/video/00/00/14/90/V-149069-8006C43A.mp4",
"https://video-js.51miz.com/preview/video/00/00/12/60/V-126093-15621487.mp4",
"https://video-js.51miz.com/preview/video/00/00/12/65/V-126513-3F154053.mp4",
"https://video-js.51miz.com/preview/video/00/00/17/59/V-175990-3C1D4D70.mp4",
"https://video-js.51miz.com/preview/video/00/00/15/18/V-151825-51101600.mp4",
"https://video-js.51miz.com/preview/video/00/00/12/65/V-126595-FF9C630B.mp4",
"https://video-js.51miz.com/preview/video/00/00/16/55/V-165520-A2B2AB1F.mp4",
"https://video-js.51miz.com/preview/video/00/00/17/55/V-175560-EC8C5E94.mp4",
"https://video-js.51miz.com/preview/video/00/00/17/50/V-175011-15C4BA56.mp4",
"https://video-js.51miz.com/preview/video/00/00/15/93/V-159396-29CDFF09.mp4",
"https://video-js.51miz.com/preview/video/00/00/17/67/V-176733-611C96FB.mp4",
"https://video-js.51miz.com/preview/video/00/00/14/81/V-148118-A9962104.mp4"
];

var dt= document.getElementById('vid');

var dtIdx = 1;

dt.onended = function()      {
      dt.src = dts;
      dtIdx++;
      dtIdx %= dts.length;
}
</script>

红影 发表于 2023-9-19 09:50

又是这么多视频的轮转呢，画面设计很漂亮。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2023-9-19 09:51

将播放器和全屏标志分放两侧上下，看着很清爽，歌词的位置也留得很不错{:4_199:}

世外桃源 发表于 2023-9-20 10:43

欣赏欣赏{:4_199:}

查看完整版本: 天高任鸟飞（DJ 默涵版）-侯泽润[视频切换可控]