最远的你是我最近的爱dj[3首连放]

亚伦影音工作室 发表于 2023-11-4 06:46

本帖最后由亚伦影音工作室于 2023-11-4 17:18 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height: 640px;MARGIN-LEFT:-300px;margin-top:13px;box-shadow:0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;overflow:hidden;border-radius:0%;background:#000000 }
   #geci{width: 100%;
font: normal 3em/0em 华文隶书;
   color: #ff0000;
   filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
   text-align:center;
   position: absolute; pointer-events: none;
   z-index: 10;
}
#wzsd1 { animation: wzsd 0.56s linear infinite ; position:absolute;width:100%;height:80px; z-index: 10; top:90%; }
@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%);}}

#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; }
#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%);}

</style>
<style>

#gj {top:10%; left:40%;z-index: 21;
position: absolute;overflow: hidden;transform:scale(0.4);
width: 100%;
height: 100%;}
#pic {top:20%; left:5%;z-index: 20;
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
border:2px solid #000000;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }
}

#mplayer {position: absolute;
   top:2%; left:0%;z-index: 21;
   width: 500px;
   height: 500px;
   cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover; transform-origin: 75% 0%;margin: 25px -32px;transform:rotate(-20deg);}
#tmsg {position: absolute;z-index: 20;
   font: normal 25px sans-serif;
   color: #ffffff;
      top:75%;
   left:15%;}
#prog {position: absolute;z-index: 91;
   width: 80%;
   height: 0.3%;
   cursor: pointer;
      top:95%;

   margin:0px 10%;
border-radius: 2px;}
</style>

<div id="papa" >
<div id="wzsd1" >
<div id="geci" ></div>
</div>
<audio id="aud"autoplay="autoplay" ></audio>
<ol style="width:380px;height:200px;color:#00ff00;position:absolute;left:30px;top:124px;font: normal 1.2em/2em 仿宋;cursor:pointer;z-index: 20; "></ol>
<divid="prog"></div>
<div id="gj" >
<div id="pic" ></div>
<div id="mplayer" class="pink"></div>
<div id="tmsg">00:00 | 00:00</div>
</div>
<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>

<script >

var lrc= []
lrc = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
lrc = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
lrc = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
   var videoArray = [
["https://p4.t57.cn:8399/2021/zw/2/GMV.m4a","最远的你是我最近的爱dj(孙艺琪)"], ["https://www.qqmc.com/mp3/music176503550.mp3","越是爱你心越痛(孙艺琪)"], ["https://xlaj.cn/assets/file/zp/20231008131344.mp3", "突然的自我(DJ童波版)"]
   ];
   var items = []
   var olObj = document.querySelector('ol');
   for(i = 0 ; i < videoArray.length; i++)    {
            oli = document.createElement('li');
            oTxt = document.createTextNode(videoArray);
            oli.appendChild(oTxt);
            olObj.appendChild(oli);
            items = oli;
   }

   geci = document.querySelector('#geci')
   var player = document.querySelector('#aud');
   var curIdx = 0;
   player.focus();
   player.src = videoArray;
   items.style.color = 'red';
            ;
player.addEventListener("timeupdate", myFunction);
function myFunction() {
   for(j=0; j<lrc.length; j++){
            if(player.currentTime >= lrc){
                     geci.innerHTML = lrc;
            }
   }
}
   player.onended = function()    {
            items.style.color = '#ffffff';
            player.pause();
            curIdx++;
            if(curIdx >= items.length) curIdx = 0;
            player.src = videoArray;
            items.style.color = '#ff0000';
            player.play();
   }
   for(n = 0; n < items.length; n++)    {
            items.onclick = function()    {
                     player.pause();
                     items.style.color = '#00f000';
                     for(j = 0; j < items.length; j++)    {
                           if(this.innerHTML == videoArray)    {
                                    player.src = videoArray;
                                    this.style.color = 'red';
                                    curIdx = j;
                                    break;
                           }
                     }
                     player.play();
            }
   };

mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

pic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pic.style.animationPlayState = 'paused');

wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
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;
   };

</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-11-4 09:13

歌曲好听，背景视频很漂亮。看这样的帖子真是赏心悦目。欣赏亚伦老师好帖{:4_199:}

红影发表于 2023-11-4 09:13

歌曲切换也很快，还能一键全控。很完美的帖子{:4_199:}

山里人 发表于 2023-11-4 13:21

欣赏佳作

小辣椒 发表于 2023-11-4 14:25

欣赏亚伦的精彩制作{:4_178:}

小辣椒 发表于 2023-11-4 14:28

背景视频转换流畅，亚伦代码运用的非常好{:4_199:}

冬天的雨 发表于 2023-11-4 21:38

一样的音乐，背景制作不一样

冬天的雨 发表于 2023-11-4 21:38

{:4_208:}{:4_208:}{:4_208:}

页: [1]

花潮论坛's Archiver

最远的你是我最近的爱dj[3首连放]