亚伦影音工作室 发表于 2023-3-30 22:55

小技巧：去除视频背景和水印蒙版

<style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d78822afcd8e69b7183994eb3368cb3b.jpg') center/cover no-repeat;
        box-shadow: 3px 3px 2px #000;
        position: relative;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {position: absolute;
        display: block;
        left: 0%; mix-blend-mode:color-dodge;
        top: 0%;
        border-radius: 0%;
        opacity: 1;
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #ffffff;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #ffffff;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>

<div id="papa">
<div class="blur"></div>
        <canvas id="canv"></canvas>
        <div id="mplayer"></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://p4.t57.cn:8399/2020/zw/8/RYV.m4a" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52e01dad564.mp4" loop autoplay muted></video>

<script>
(function(){
let ctx = canv.getContext('2d');

let ww = canv.width =1164, hh = canv.height =620;

let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 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 -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 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
伤了心的歌 (DJ酱爆鱿鱼版) - 许丽静
词：名利
曲：名利
DJ制作：DJ酱爆鱿鱼
出品：音势力
OP：坚诚文化
「未经著作权人许可 不得翻唱翻录或使用」
我只不过你的一个过客
为什么就不能放过我呢
毕竟我是那么的深爱着
你从不手软把我伤害着
喔喔喔喔喔
喔喔喔喔喔
喔喔喔喔喔
喔喔喔喔喔
爱情它到底什么模样
让我快乐也让我发狂
承诺说的多漂亮
走的时候多嚣张
一切就像未曾一样
超人也有疲惫时候
何况我平凡的双手
嘲讽说红尘已看透
夜深却一人在泪流
谁也看不见谁的忧伤
坚强背后是恐惧不安
爱情让我绝了望
生活让我负了伤
枕边的泪枕着孤单
喔喔喔喔喔
喔喔喔喔喔
过去它不是旧梦一场
白昼过后会痛到发狂
放不放下又怎样
回忆还是那么长
孟婆的汤玩笑一场
`;

/*变量 ：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); /*获得歌词数组*/
})();
</script>

      <style type="text/css">
            .blur { width: 200px; height: 55px;
       filter: blur(8px);z-index: 1;
position: absolute;
top:2%; left:82%;
       background: #eeeeee url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d78822afcd8e69b7183994eb3368cb3b.jpg') center/cover no-repeat;
}
      </style>

庶民 发表于 2023-3-31 05:32

精彩，，，

小辣椒 发表于 2023-3-31 12:34

欣赏漂亮制作{:4_187:}

红影 发表于 2023-3-31 17:32

好漂亮的制作{:4_187:}
页: [1]
查看完整版本: 小技巧：去除视频背景和水印蒙版