论坛 › 欢乐水吧 › 欢度国庆【即兴】

亚伦影音工作室 发表于 2024-9-24 21:02

欢度国庆【即兴】

本帖最后由 亚伦影音工作室 于 2024-9-24 21:26 编辑 <br /><br /><style>
#papa {
        margin: 120px -300px;
        width: 1286px;
        height: 720px;
        background:#000000 url('https://')no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#vid { position: absolute; width: 100%; height: 100%; top:0%; left:0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; -webkit-mask-image: radial-gradient(black 15% ,transparent 85%);}
#vido { position: absolute; width: 100%; height: 100%; top:0%; left:0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: -1;}
audio {position:absolute;top:94%;z-index: 50;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}

.list{list-style: none;left: -50px;top: 130px;width:100%;height:100%;position:absolute;z-index: 4;overflow:hidden;}
.list li{width: 90%;height: 90%;position:relative;line-height: 600px;text-align: center;left: 5%;font: 600 3.5em/1.6em 黑体;animation: myfirst 120s linear 1 0s;color:#880000;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);opacity:0;overflow:hidden;}

.stop .list li{animation-play-state: paused;}

@keyframes myfirst {0% {
          opacity: 0;
           transform:perspective(600px) translate(100%,0%)scale(1)rotateX(20deg)rotateY(-200deg);
        }
        3% {
          opacity: 1;
          transform: translateX(0px);
        }
50% {
          opacity: 1;
          transform: translateX(0px);
        }
55% { opacity: 1;transform:perspective(600px) translate(-100%,0%)scale(1)rotateX(20deg)rotateY(-180deg);}

100% { opacity: 0;transform:perspective(600px) translate(-100%,0%)scale(1)rotateX(20deg)rotateY(-180deg);}
}
#lrc{left: 10%;top: 75%;}#lrcc {right:10%;top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:900 3em 楷体;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 -1px 0);}
#lrcc::before,#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 {}
</style>
<div id="papa">
<video id="vid"src="https://"muted="" autoplay=""></video>
<video id="vido"src="https://video-qn.51miz.com/preview/video/00/00/12/10/V-121080-778B0561.mp4"muted="" autoplay=""loop="loop"></video>
<audio id="aud" src="https://s1.krakenfiles.com/uploads/24-09-2024/7GBsbQJuTv/music.m4a" style="width:100%;" autoplay="autoplay" controls="controls" height="100%" loop="loop"></audio>
<div id="testImg" ><div class="list">
<li><p style="zoom:1.4">今天是你的生日</p><br /><p style="zoom: .7">作词：韩静廷/作曲：谷建芬<br />亚伦影音工作室<br/>演唱:董文华</p></li>
</div></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>

<script>
   var video = document.getElementById("vid");
    var videos = ["https://video-qn.51miz.com/preview/video/00/00/63/82/V-638254-54B1BED6.mp4",
"https://video-qn.51miz.com/preview/video/00/00/63/89/V-638949-086BE3EB.mp4",
"https://video-qn.51miz.com/preview/video/00/00/63/68/V-636868-B00525BE.mp4",
"https://video-qn.51miz.com/preview/video/00/00/13/53/V-135366-F4DD0CEB.mp4",
"https://video-qn.51miz.com/preview/video/00/00/17/53/V-175320-09CAF6F6.mp4",
"https://video-qn.51miz.com/preview/video/00/00/63/85/V-638548-BFE1F020.mp4",
"https://video-qn.51miz.com/preview/video/00/00/10/68/V-106866-BDB90A5A.mp4"];
    var index = 0;
video.addEventListener("ended", function() {
      index++;
      if (index == videos.length) {
            index = 0;
      }
      video.src = videos;
      video.addEventListener("loadedmetadata", function() {
            video.currentTime = 0;
            video.play();
      });
    });

    video.src = videos;
    video.addEventListener("loadedmetadata", function() {
      video.play();
    });

let mState = () => aud.paused ?(vid.pause(),vido.pause(),image.classList.add('stop')) : (vid.play(), vido.play(),image.classList.remove('stop')) ;
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
var image= document.getElementById("testImg");

</script>

<span id="lrcStr" style="visibility: hidden;">

今天是你的生日 我的中国
清晨我放飞一群白鸽
为你衔来一枚橄榄叶
鸽子在崇山峻岭飞过
我们祝福你的生日 我的中国
愿你永远没有忧患 永远宁静
我们祝福你的生日 我的中国
这是儿女们心中期望的歌
今天是你的生日 我的中国
清晨我放飞一群白鸽
为你带回远方儿女的思念
鸽子在茫茫海天飞过
我们祝福你的生日 我的中国
愿你月儿常圆 儿女永远欢乐
我们祝福你的生日 我的中国
这是儿女在远方爱的诉说
今天是你的生日 我的中国
清晨我放飞一群白鸽
为你衔来一棵金色麦穗
鸽子在风风雨雨中飞过
我们祝福你的生日 我的中国
愿你逆风起飞 雨中获得收获
我们祝福你的生日 我的中国
这是儿女们心中期望的歌
我们祝福你的生日 我的中国
愿你逆风起飞 雨中获得收获
我们祝福你的生日 我的中国
这是儿女们心中期望的歌
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
        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) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () =>aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();
</script >

冬天的雨 发表于 2024-9-24 21:11

估计是mp4背景，没有看见效果出来

红影 发表于 2024-9-24 21:47

视频制作很漂亮，歌曲播放不稳定，经常断呢。

一起祝福我们伟大的祖国生日快乐{:4_199:}

亚伦影音工作室 发表于 2024-9-24 21:50

红影 发表于 2024-9-24 21:47
视频制作很漂亮，歌曲播放不稳定，经常断呢。

一起祝福我们伟大的祖国生日快乐

有时间再上传其他网盘

红影 发表于 2024-9-24 22:50

亚伦影音工作室 发表于 2024-9-24 21:50
有时间再上传其他网盘

现在好了，播放很顺畅{:4_187:}

梦油 发表于 2024-9-25 08:20

预祝亚伦和朋友们国庆节快乐！

老谟深虑 发表于 2024-9-25 18:45

         好作品，点赞！欢度国庆！

小辣椒 发表于 2024-9-25 21:55

亚伦的特效代码做的太完美了{:4_199:}

小辣椒 发表于 2024-9-25 21:56

冬天的雨 发表于 2024-9-24 21:11
估计是mp4背景，没有看见效果出来

是的，电脑欣赏效果很美的，手机是看不见的

查看完整版本: 欢度国庆【即兴】