亚伦影音工作室 发表于 2025-3-14 16:46:15

拥有的回忆【独家视频转场代码】

<style>
#papa { margin: 10px 0 0px calc(50% - 670px); background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d242e32551275981bf8c034e037981d8.jpg') no-repeat center/cover;width: 1186px; height: 680px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
.vid{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover;
pointer-events: none;
opacity: 0;
animation: round 100s linear infinite;}
@keyframes round {0% {opacity: 0;}
4% {
opacity: 1;}
10% {
opacity: 1;}
15% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10){animation-play-state: paused;}

#mb{width: 100%; height: 100%;z-index: 2;
position:absolute;background: linear-gradient(180deg, rgba(242,242,245,0.008368313145570738) 74%, rgba(124,7,13,0.557387920988708) 93%);
top:100%; left:0%;opacity:1;}
      #mboard {width:100%;height:200px;display: flex; justify-content: center; align-items:center;gap: 8px; position: absolute; bottom: -140px;right: 20px; z-index: 3;opacity:1;}

#papa:hover #mboard{opacity:1;bottom: -80px;}
#papa:hover #mb{opacity:1;top:0%;}

      #mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
      #tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
      #volwrap { position: absolute; width: 100px; height: 80px;place-items: center;border-radius: 20px;transform:rotate(-90deg);right: -14px;bottom: 130px;}
      input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
input::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
input::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:#039C09;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient( #039C09, #039C09) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;
}

#volwrap:hover #volume { opacity:1;}
      #btnMute:hover ~ #volwrap > #volume {opacity:1; }
#volume { position: absolute; width: 100px; height: 2px;opacity:0;}
      #prog { --track:#eee; --prog:#039C09 ; --prg: 0%; width: 78%; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;align-items: center;}

#loopbnt{   z-index: 91;
      position:absolute;
      width: 25px;
      height: 20px;
      bottom: 92px;border-radius: 0px;
   right:1%;filter:invert(0%)hue-rotate(180deg);
      cursor: pointer;
    }
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;top:5%; cursor: pointer;right: 25px;z-index: 40;filter:invert(0%)hue-rotate(180deg);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%; top: 84%;transform: translate(-50%);font:400 3.5em/1em 华文行楷;color: #000080;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }

</style>
<div id="papa">

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/65/72/V-657222-6506A22A.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/16/37/V-163710-4722C28D.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/26/V-642660-2AF8E09D.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/60/82/V-zip-20230301_DV_236-A4FE233A.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/92/V-649284-0F51DE30.mp4" loop muted autoplay=""></video>

<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/13/V-641347-C500102B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/07/V-640739-530482F4.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/16/08/V-160853-4C52526C.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/62/24/V-622464-063782BE.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/65/72/V-657259-8F96241F.mp4" loop muted autoplay=""></video>
</div>
<div id="mb"> </div>
<div id="mboard">
      <img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
      <span id="tMsg1">00:00</span>
      <span id="prog"></span>
      <span id="tMsg2">00:00</span>
      <img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
      <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
   
</div>

<div data-lrc="" id="lrc"></div>
<div id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/4d/ad/05/ca6f2c7aae5292834bbf41919a83d33d/audio.mp3" autoplay ></audio>

<script>
      
var lastVolume = 1, muted = false;

var imgAr = [
      'https://638183.freep.cn/638183/web/icon/play.svg',
      'https://638183.freep.cn/638183/web/icon/pause.svg',
      'https://638183.freep.cn/638183/web/icon/unmuted.svg',
      'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
      if(lastVolume === 0) return;
      muted = !muted;
      muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};

var s2m = (seconds) => {
    const secs = Math.floor(seconds || 0);
    return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {
      btnPlay.src = aud.paused ? imgAr : imgAr;
      btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
      if(!e.altKey) return;
      switch (e.keyCode) {
                case 88:
                        btnPlay.click();
                        break;
                case 74:
                        setMute();
                        break;
                case 187: case 107:
                        aud.volume = setVolume(aud.volume + 0.1);
                        lastVolume = aud.volume;
                        break;
                case 189: case 109:
                        aud.volume = setVolume(aud.volume - 0.1);
                        lastVolume = aud.volume;
                        break;
                default:
                        return;
      }
});


aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
      prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
      tMsg1.innerText = s2m(aud.currentTime);
      tMsg2.innerText = s2m(aud.duration);
};

aud.onvolumechange = () => {
      btnMute.src = aud.volume === 0 ? imgAr : imgAr;
      volume.value = aud.volume;
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}


      
   
      btnPlay.onclick = () => aud.paused ? aud.play():aud.pause();
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      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>
<script>
(function() {var image = document.getElementById("testImg");
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
         vids.forEach(vid => aud.paused ? (vid.pause(),image.classList.add('stop') ): (vid.play(),image.classList.remove('stop')) );
      };
aud.onplaying = aud.onpause = () => mState();
})();

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

klxf 发表于 2025-3-14 17:41:36

顺畅、精致、漂亮！祝贺亚伦老师再创新高:)

醉美水芙蓉 发表于 2025-3-14 20:13:48

欣赏亚伦老师精彩视频音画！

醉美水芙蓉 发表于 2025-3-14 20:14:43

柔情似水的旋律和舒缓怀旧的曲调被略带伤感的歌词诠释得如诗般飘荡在空气中,将人世间的风情挥洒开来.

醉美水芙蓉 发表于 2025-3-14 20:15:02

精彩的画面,让人耳目一新,非常有创意作品,上茶,祝好.

夏艳妍 发表于 2025-3-19 20:24:03

分享超有趣，点赞不能停

hongmudan 发表于 2025-3-21 12:12:55

支持发布，好内容超吸睛

Robertlault 发表于 2025-3-23 13:32:53

赞，顶帖真的超有水平

RobertWAh 发表于 2025-3-24 14:33:11

赞，顶帖内容引人深思

1643091610 发表于 2025-3-25 15:09:48

谢谢楼主，，，收藏ing
页: [1] 2
查看完整版本: 拥有的回忆【独家视频转场代码】