亚伦影音工作室 发表于 2025-6-11 16:14

高仿清晰视频音画<<搀扶>>

本帖最后由 亚伦影音工作室 于 2025-6-12 11:17 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 680px); background:#800 url() 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),
.stop .zt{animation-play-state: paused;}
.zt{list-style: none;left: 0px;width:100%;height:600px;top:15%; position:absolute;z-index: 4;overflow:hidden;}
.zt e{width: 100%;height: 600px;top:5%;position:relative;animation: myfirst 80s 5 ;animation-delay: 5s;line-height: 20px;text-align: center;font: normal 2.2em/2em 华文行楷;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0.5;color:#000000;transform:scale(0)}10% {opacity: 1;color: #800000;transform:scale(1)}15% {opacity: 1;color: #800000;transform:scale(1)}50%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1) }}


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

#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: 3px;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 / 5 10 5 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: 2px; 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:300 3.8em/1em 华文行楷;color: #0000;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); transform: scale(.8) } }@keyframes cover2 { to { clip-path: inset(0 0 0 0);transform: scale(.8) } }
</style>
<div id="papa">

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/38/V-683870-A46701AA.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/63/33/V-633383-30DC563A.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/39/V-683930-F83FB939.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/38/V-643838-12FDD7EF.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/34/V-683439-1EC32204.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/66/90/V-669013-5BB29249.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/67/76/V-677685-0A5CEF2F.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/34/V-683499-BC2609DE.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/00/00/68/69/51miz_V686945_NWMKWjmE7.mov" loop muted autoplay=""></video>
<div class="zt">
<e> <divstyle="transform: scale(4);">搀扶</div><br><div> 作词：马健涛<br>作曲：马健涛<br>演唱：马健涛&周艳泓<br>出品：亚伦影音工作室</div></e>
</div>

</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.cldisk.com/sv-w8/audio/89/72/2a/71f4e3d9884863575037dd42d7adb758/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>

红影 发表于 2025-6-11 16:35

这制作真漂亮，欣赏亚伦老师好帖{:4_199:}

樵歌 发表于 2025-6-11 16:35

制作得相当漂亮！很契合歌词中的意境。{:4_199:}

樵歌 发表于 2025-6-11 16:36

这歌很流行的，貌似到处都在传唱。主要是歌词很适合大众的心态，因为进入老龄社会了呀。

杨帆 发表于 2025-6-11 17:27

本帖最后由 杨帆 于 2025-6-11 17:32 编辑



真分享，真交流，真示范，感谢亚伦老师一而贯之源码分享自己的研究成果；

无私心，无杂念，无遮掩，感谢亚伦老师引领大家走上阳光向上的学习之路；

大胸怀，大格局，大智慧，感谢亚伦老师为音画贴制作发展作出的卓越贡献！



亚伦影音工作室 发表于 2025-6-11 20:23

本帖最后由 亚伦影音工作室 于 2025-6-12 11:19 编辑 <br /><br /><style>
.wz{top: 20px;position: relative;width: 800px;
         line-height: 20px;opacity: 0;
            text-align: center;filter:drop-shadow(#fff 1px 1px 0);
      color: #ff0000;animation: myfirst 80s 5;
animation-delay: 5s;

          font: 900 2.5em/1.5em 'FZYaoti', sans-serif;
      }
@keyframes myfirst {0% {opacity: 0;color:#000000;transform:scale(0)}10% {opacity: 1;color: #800000;transform:scale(1)}15% {opacity: 1;color: #800000;transform:scale(1)}50%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1) }100%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1) }}

</style>

<div class="wz">
                <div style="transform: scale(1.6);">搀扶</div><br>
               精品音画<br>
               词曲：马健涛<br>
               演唱：马健涛<br>
               出品：亚伦<br>
            </div>

亦是金 发表于 2025-6-12 08:33

欣赏学习老师精美音画帖！问好！{:4_190:}
页: [1]
查看完整版本: 高仿清晰视频音画<<搀扶>>