小辣椒 发表于 2025-5-5 22:21

亚纶的多视频背景转换

<style>
#papa{
        position: relative;
        width: 1286px;
        height: 720px;
      margin-left:-220px;
        margin-top:180px;
        border: 1px solid rgba(36, 201, 219,.95);
      border-radius: 2px;
        background:#000;
        overflow: hidden;--stat: running ;
}
#vid1{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
.vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;

opacity: 0;object-fit: cover; pointer-events: none;
animation: round 80s linear infinite var(--stat);}
@keyframes round {1% {opacity: 0;}
5% {
opacity: .6;}
10% {
opacity:.8;}
15% {
opacity:1;}
20% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 72s;}
.vid:nth-child(2){animation-delay: 64s;}
.vid:nth-child(3){animation-delay: 56s;}
.vid:nth-child(4){animation-delay: 48s;}
.vid:nth-child(5){animation-delay: 40s;}
.vid:nth-child(6){animation-delay: 32s;}
.vid:nth-child(7){animation-delay: 24s;}
.vid:nth-child(8){animation-delay: 16s;}
.vid:nth-child(9){animation-delay: 8s;}
.vid:nth-child(10){animation-delay: 0s;}
#mdiv {top:12%; left:5%;cursor: pointer;
        width:200px;text-align:center;animation:rot 10s linear infinite var(--stat);
        position: absolute;filter:drop-shadow(#000 0px 0 1px);
        z-index: 40;
        }
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover {}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: #880000;
      position: absolute;z-index: 6;
      left: 50%;
      transform: translate(-50%);
      top: 86%;
      font:normal 3em 华文新魏;
color: #000;
      
      
      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{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
#fullscreen { position: absolute; bottom:92%; left:85%;font:900 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style >
<div id="papa" >
<span id="fullscreen">全屏欣赏</span>

<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5d17820de04ac325dc72548c1f20b07c_preview.mp4" loop muted autoplay=""></video>

<div>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a8371f5757e5bc1536e17640cde8c72a_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/2cdc75f9d8cf04f41797b38da4df3457_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4841acb74838c86f540eb74dbda173ac_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4c8cb2dbb7aaaa9d939ace9b3e47a187_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b0d5ca6721505aa766119a7f85138b0e_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3f12a8f8a64f14d4aa3099edfe7331de_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e9b8991a088d9f54cf9471a70e53af83_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/95effbc84b9c3d77095ea29c94b0bc03_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6281e130a0d6a6ff1c2647e96a3bacb5_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3106f9f638e11208eb43f5930d1c4572_preview.mp4" loop muted autoplay></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/04/0f/1c/4ebfc72a5f8b87148c8f962667d2e48c/audio.mp3" autoplay loop></audio>
<div id="mdiv">
        <svg width="100" height="100" viewBox="-160 -160 320 320">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black"></feDropShadow>
                </filter>
                <g id="part" filter="url(#shadow)">
                        <line x1="0" y1="-100" x2="0" y2="100" stroke="#880" stroke-width="4"></line>
                        <ellipse cx="0" cy="-125" rx="20" ry="20" fill="#fff"></ellipse>
                        <ellipse cx="0" cy="125" rx="20" ry="20" fill="#fff"></ellipse>
                </g>
        </defs>
        <use href="#part"></use>
        <use href="#part" transform="rotate(35)"></use>
        <use href="#part" transform="rotate(70)"></use>
        <use href="#part" transform="rotate(105)"></use>
        <use href="#part" transform="rotate(140)"></use>
</svg>
</div>
<div data-lrc="视频转场效果" id="lrc">视频转场效果</div>
</div>

<script>
(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {papa.style.setProperty('--stat', aud.paused ? 'paused' : 'running');
         vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
      };
      aud.onplaying = aud.onpause = () => mState();
      })();

mdiv.onclick = () => aud.paused ? (aud.play(),vid1.play()): (aud.pause(),vid1.pause());
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `倾国倾城-阿宝、熊汝霖
作词：小柯
作曲：小柯
熊：雨过白鹭洲留恋铜雀楼
斜阳染幽草几度飞红
摇曳了江上远帆
回望灯如花未语人先羞
心事轻梳弄浅握双手
任发丝缠绕双眸
阿：所以鲜花满天幸福在流传
熊：流传往日悲欢眷恋
阿：所以倾国倾城不变的容颜
熊：容颜瞬间已成
合：永远
阿：此刻鲜花满天幸福在身边
熊：身边两侧万水千山
阿：此刻倾国倾城相守着永远
熊：永远静夜如歌般
合：委婉
熊：回望灯如花未语人先羞
心事轻梳弄浅握双手
任发丝缠绕双眸
阿：所以鲜花满天幸福在流传
熊：流传往日悲欢眷恋
阿：所以倾国倾城不变的容颜
熊：容颜瞬间已成
合：永远
阿：此刻鲜花满天幸福在身边
熊：身边两侧万水千山
阿：此刻倾国倾城相守着永远
熊：永远静夜如歌般
合：委婉
此刻倾国倾城相守着永远
`;

/*变量 ：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')) : (lrc.style.setProperty('--state','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>


小辣椒 发表于 2025-5-5 22:26

郁闷，代码加了html我小屋手机看不见了，电脑可以的

小辣椒 发表于 2025-5-5 22:27

呼叫小风手机去我那边看看，有什么办法可以让手机可以看见？

liumang 发表于 2025-5-5 22:28

进去看了一下，视频有10个，转换背景出来效果很漂亮

liumang 发表于 2025-5-5 22:29

你直接问亚纶老师不是更加好

小辣椒 发表于 2025-5-5 22:30

liumang 发表于 2025-5-5 22:29
你直接问亚纶老师不是更加好

我给他回了信息的，估计只能电脑欣赏了

liumang 发表于 2025-5-5 22:30

小辣椒 发表于 2025-5-5 22:30
我给他回了信息的，估计只能电脑欣赏了

那就电脑欣赏，手机的看不见让他们换电脑{:5_118:}

小辣椒 发表于 2025-5-5 22:31

liumang 发表于 2025-5-5 22:30
那就电脑欣赏，手机的看不见让他们换电脑

你滑稽呢，我自己也是要手机看的啊，我白天又没有时间玩电脑的

liumang 发表于 2025-5-5 22:32

小辣椒 发表于 2025-5-5 22:31
你滑稽呢，我自己也是要手机看的啊，我白天又没有时间玩电脑的

那你就晚上看看算了，白天好好工作，工作还三心二意的{:6_181:}

小辣椒 发表于 2025-5-5 22:33

liumang 发表于 2025-5-5 22:32
那你就晚上看看算了，白天好好工作，工作还三心二意的

算了，算了，我去问问我师父
页: [1] 2
查看完整版本: 亚纶的多视频背景转换