论坛 › 欢乐水吧 › 命中有你(DJ 版)-云朵【视频可控】

亚伦影音工作室 发表于 2023-9-18 14:52

命中有你(DJ 版)-云朵【视频可控】

本帖最后由 亚伦影音工作室 于 2023-11-20 11:45 编辑 <br /><br /><style>
#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;place-items: center; position: relative;z-index: 12345;background: #333;}
#mydiv { margin: 0px auto;
      width: 100%;
      height: 100%;background: transparent;
       overflow: hidden;
      position: relative;
      --state: paused;
}
#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 #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: 1}

#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:82%;transform: translate(-50%); font:normal 3em 华文新魏; color:#000080;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index: 6; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@keyframes cover1{0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}

100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}

100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
</style>
<div id="papa">
<div id="mydiv"><span id="fullscreen">.</span></div>
<video id="vid"src="https://video-js.51miz.com/preview/video/00/00/15/97/V-159732-0C25F194.mp4" muted autoplay></video>


<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music232462852.mp3" autoplay loop></audio>

<script>
let total = 120, ww = mydiv.offsetWidth, hh = mydiv.offsetHeight;
let script = document.createElement('script');
script.charset = 'utf-8';
script.src ='https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);
script.onload = () => {
      HCPlayer({
                papa: '#mydiv',
                player_css: 'left: 15%; bottom: 5%;',
                img: {
                        enter: '',/* 进入全屏按钮地址 */
                        quit: '',/* 退出全屏按钮地址 */
                        play: '',/* 播放按钮地址 */
                        pause: '',/* 暂停按钮地址 */
                }
      });
};

</script>
<script>
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `命中有你(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);})();
</script>
<script>
var dts = ["https://video-js.51miz.com/preview/video/00/00/16/55/V-165559-28CD1A6B.mp4",
"https://video-js.51miz.com/preview/video/00/00/15/93/V-159397-5EF536E2.mp4",
"https://video-js.51miz.com/preview/video/00/00/16/43/V-164390-BC4AA3ED.mp4",
"https://video-js.51miz.com/preview/video/00/00/17/67/V-176731-4F2588B8.mp4",
"https://video-js.51miz.com/preview/video/00/00/12/63/V-126385-420D0B23.mp4",
"https://video-js.51miz.com/preview/video/00/00/16/54/V-165480-BC7738BB.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;
}




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

亚伦影音工作室 发表于 2023-9-18 15:02

遇见一个问题请求马老解决，全屏展示后为啥是黑屏了！

红影 发表于 2023-9-18 20:05

这么多小视频，每个都很漂亮。替换很无痕。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2023-9-18 20:05

亚伦影音工作室 发表于 2023-9-18 15:02
遇见一个问题请求马老解决，全屏展示后为啥是黑屏了！

的确，全屏后是黑屏呢，真奇怪{:4_203:}

查看完整版本: 命中有你(DJ 版)-云朵【视频可控】