论坛 › 欢乐水吧 › 测试视频叠加效果且控制

亚伦影音工作室 发表于 2023-10-23 15:46

测试视频叠加效果且控制

本帖最后由 亚伦影音工作室 于 2024-4-17 14:44 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
        width: 1164px;
        height: 640px;
        background:#000000;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 0.3;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;mix-blend-mode: lighten; }
#vid1 { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0s all ease;filter:hue-rotate(10deg)contrast(160%)brightness(100%);}
#tmsg {position: absolute;z-index: 91;
      font: normal 15px sans-serif;
      color: #ffffff;
         top:93.5%;
      left:85%;}

#prog {position: absolute;z-index: 91;
      width: 76%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:7%;
border-radius: 2px;}
#mplayer {z-index: 80;position:absolute;top:93%;left:3%;width:30px;height:30px;filter:hue-rotate(60deg)contrast(180%)brightness(300%);}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#musickrc{width:80%;line-height:40px;position: absolute;position: absolute;left:10%;top:78%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#musickrc span {display:block;text-align:center; }

#bt{ width: 90%; height: 60px;color: #ffffff; position: absolute; left:3%;top:5%;font-size: 20px; font-family:仿宋;z-index: 11; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 80%;}
}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="testImg"><div id="bt">八九岁 - 花僮</div></di>
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d5e65d5535209ab6e36dc73596bbb1b_preview.mp4" muted autoplay loop></video>
<video id="vid1"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4" muted autoplay></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div ><img id="mplayer" src="https://638183.freep.cn/638183/t23/btn/play2.png" alt="" /></div>
<divid="musickrc" >
<divid="wzsd1"><p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:华文隶书;font-size: 40px;" ></P></di>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 40px;"></P>
</div>
</div>
<audio id="aud" src="https://s3.krakenfiles.com/uploads/17-04-2024/i0iMk3vPr1/music.m4a" loop autoplay></audio>
<script >
var songkrc =`八九岁 - 花僮
词：公子
曲：花僮
编曲：韩俊平
和声：clean
混音：CuTTleFiSh
母带：CuTTleFiSh
制作人：亚伦
OP：亚伦影音
那年的课间照片笑得都很青涩
那时的每天没钱三五毛就快乐
那天的毕业分别没察觉多不舍
可是一转眼就再也回不去了
如果回到八九岁了再来一次选择
我想放下一切找回我的快乐
时光这辆列车走了太多乘客
不知道为什么一怀念人就变老了
那年的黑白电视星期二就停播
那时的武侠世界充满我的生活
那天的漫漫长夜天空星星很多
可是一转眼就再也找不到了
如果回到八九岁了再来一次选择
我想放下一切找回我的快乐
时光这辆列车走了太多乘客
不知道为什么一怀念人就变老了
回到八九岁了再来一次选择
我想放下一切找回我的快乐
时光这辆列车走了太多乘客
不知道为什么一怀念人就变老了
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML =lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
        img.src="https://638183.freep.cn/638183/t23/btn/pause2.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="https://638183.freep.cn/638183/t23/btn/play2.png";
}, false);})();

mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

/*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };
/*结束*/

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { aud.paused ?(vid.play()): (vid.pause()) };
/*结束*/

klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
</script>

<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
</script>
<script>
(function() {
let vid1 = document.querySelector('vid1');
let mState = () => aud.paused ?vid1.pause() :vid1.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);});
setInterval( () => { aud.paused ? vid1.pause() : vid1.play(); },100);
var dts = [
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6648b5e3e5a9f07b8fffd9689c73f4a5_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/736fdc82634c98f0146dc7492f29fa6a_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c4c773c5e33f7d0f9ccdc0db0f9f8dbf_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8de5242073d6a845db945e81c1971b80_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c3e0dfe58d56efa1b3922cfa3de07e1f_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ccd7c236ef2fae94462eb93e5a60b79e_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9c4a0b27d12cf4e2d42ec76e5161d9cd_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3ccf3f47f62f1cba2480e21720fa1f74_preview.mp4"
];
var dt= document.getElementById('vid1');
var dtIdx = 1;
dt.onended = function(){
      dt.src = dts;
      dtIdx++;
      dtIdx %= dts.length;
}
</script>

亚伦影音工作室 发表于 2023-10-23 16:29

https://bizhi.cheetahfun.com/dtag_296752/

红影 发表于 2023-10-23 17:03

这个叠加视频太美了，欣赏亚伦老师好帖{:4_199:}

红影 发表于 2023-10-23 17:03

还有视频来源分享，这个太贴心了。感谢亚伦老师{:4_187:}

偶然~ 发表于 2023-10-23 17:31

太棒了~我听的都醉了~都醉了！

偶然~ 发表于 2023-10-23 17:31

好听｀给我签个名吧！就签俺衣服上吧！要带唇印的哦~~

偶然~ 发表于 2023-10-23 17:32

真棒~~╰谢谢亚伦影音工作室带来的精彩～！

偶然~ 发表于 2023-10-23 17:32

牡丹花★·。水仙花╰☆╮一筐一筐又一筐∴ 紫丁香╰☆╮【*偶然 献花给你啦】

偶然~ 发表于 2023-10-23 17:32

玫瑰花☆╮╮芍药花☆╮☆╮合欢花花～【偶然 送给你】

醉美水芙蓉 发表于 2023-10-23 17:56

小辣椒 发表于 2023-10-26 17:26

亚伦太棒了，这个视频转换了{:4_178:}

小辣椒 发表于 2023-10-26 17:28

亚伦影音工作室 发表于 2023-10-23 16:29
https://bizhi.cheetahfun.com/dtag_296752/

亚伦最大的优点就是不保守，乐于分享，无论代码还是资源，赞一记！{:4_187:}

查看完整版本: 测试视频叠加效果且控制