学习帖【为你干一杯】黑黑老师归零帖 - 第2页 - 欢乐水吧 - 花潮论坛

起个网名好难 发表于 2024-8-17 16:27

起个网名好难 发表于 2024-8-17 16:34

用我自己的代码，为避免冲突不自动开始播放<br>
<style>
#oBlk {
--w:1400px;--h:800px;
width:var(--w);height:var(--h);
margin:32px 0 32px calc(50% - 781px);
overflow:hidden;border-radius:32px;
box-shadow:3px 3px 10px black;
position:relative;
}
#vid { width:110%; position:absolute; left:0px; bottom:0px;}

#splay {width:120px;height:120px;position:absolute; right:30px;bottom:20px;overflow:hidden;border-radius:50%;box-shadow: inset 0 0 30px gray;
background:url(https://p1.music.126.net/MeehU-J4SGHUNuOU39wgQg==/29686813965767.jpg) no-repeat center/cover;
animation:rot 10s linear infinite ;}
@keyframes rot {to {transform:rotate(360deg);}}

.lrcShow{font:normal 30px sans-serif;position:absolute;left:30%;top:20px;z-index:9;color:rgb(173, 216, 230);filter:drop-shadow(1px 1px 1px black);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;
      background-image: url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);
   -webkit-background-clip: text;
   background-clip: text;
overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}

@keyframes bgMove0 { from { width: 0%; } to { width: 100%; } }
@keyframes bgMove1 { from { width: 0%; } to { width: 100%; } }

/*----------------------------------------------------------------------------------------*/
.slider {
-webkit-appearance: none;
/* 覆盖默认外观 */
width: 60%;
/* 宽度 */
height: 2px;
/* 高度 */
background: pink;
/* 背景颜色 */
outline: none;
/* 去掉轮廓线 */
opacity: 0.5;
/* 透明度 */
transition: opacity .2s;
/* 过渡动画 */
/* */
border-radius:5px;
position:absolute; left:20%; bottom:16px;
z-index:100;
}

.slider:hover {
opacity: 1;
/* 悬停时不透明 */
}

/* 滑块样式 */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
/* 覆盖默认外观 */
appearance: none;
width: 0px;
/* 滑块宽度 */
height: 0px;
/* 滑块高度 */
background: transparent;
/* 滑块颜色 */
cursor: pointer;
/* 鼠标样式变为指针 */
border: 6px solid transparent;
border-left: 15px solid #4CAF50;
/* 滑块为三角形 */
}
.progMeter {position:absolute; bottom:30px; left:50%;color:hsl(240, 80%, 40%);font-size:smaller;font-weight:600;}
</style>
<div id="oBlk">
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/15/99/5e97205cbcb4c.mp4" loop autoplay muted></video>
<div id="splay"></div>
<div class="lrcShow" data-lrc="美酒加咖啡" >美酒加咖啡</div>
<label class="progMeter">0%</label>
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
</div>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('F L=j(){C 4.V.1j(4,1g)};L.1h={1i:L,V:j(R){u=R.P.E(/(^\\s*)|(\\s*$)/g,\'\');4.7=x.S(\'.1d\');4.i=x.S(\'.1e\');4.T=x.S(\'.T\');4.6=4.16(u);4.17(R.1f);4.v=q},16:j(u){F p=u.E(/(^\\s*)|(\\s*$)/g,"").W(/\\r|\\n|\\r\\n/);F 9=1n 1o();z(10 o=0;o<p.h;o++){10 A=p.1p(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(A){I=p.1k(\']\');f(I>0)P=p.Z(I+1);z(m=0;m<A.h;m++){J=A.Z(1).E(\']\',\'\').W(/:/);K=(+J)*1l+(+J);f(9.h==0&&K!=0){9.15({c:0,Q:\'\\1m\\X\\X\\1c\\1a\\1b\\19\'})}9.15({c:+K.B(2),Q:P})}}}9.18(j(a,b){C(a.c-b.c)});z(k=0;k<9.h-1;k++){9.O=+(9.c-9.c).B(2)}C 9},13:j(G){4.7.12=4.7.1U.1T=4.6.Q;4.7.l.t(\'--1I\',\'1N\'+(4.8%2));4.7.l.t(\'--G\',G+\'s\');4.7.l.t(\'--H\',\'Y\');4.8++},17:j(U){4.5=x.1O("11");4.5.1L=q;4.5.1R=q;4.5.1J=14;4.5.1K=U;4.7.1S(4.5);4.8=0;4.5.e(\'1P\',()=>{4.8=0;4.5.w()});4.5.e(\'1Q\',()=>{4.6.O=+(4.5.M-4.6.c).B(2)});4.5.e(\'w\',()=>{4.7.l.t(\'--H\',\'Y\')});4.5.e(\'1H\',()=>{f(4.8==1&&4.5.D<1){4.5.w();C q}4.7.l.t(\'--H\',\'1v\')});4.5.e(\'1u\',()=>{1x.1M("11 1r, 1q w 1t 1s");4.7.l.1y=\'1E\';4.7.1D(4)});4.5.e(\'1G\',()=>{f(!4.v){4.i.N=4.5.D/4.5.M*1F;4.T.12=4.i.N+\'%\'}f(4.8<4.6.h){f(4.5.D>=4.6.c){4.13(4.6.O)}}});4.i.e(\'1A\',()=>4.v=14);4.i.e(\'1z\',()=>4.v=q);4.i.e(\'1C\',()=>{y=(4.i.N/4.i.1B*4.5.M).B(2);z(n=0;n<4.6.h-1;n++){f(y>=4.6.c&&y<4.6.c){4.5.D=y;4.8=n;1w}}})}}',62,119,'||||this|mObj|lrcVec|lrcShowObj|idx|lrcs|||seconds||addEventListener|if||length|indicator|function||style|||index|parts|false|||setProperty|lyricTxt|mseek|play|document|seekTime|for|chkTime|toFixed|return|currentTime|replace|var|durTime|aniPlayState|tIdx|ta|_0|lrcPlayerY|duration|value|dur|lrcTxt|words|opts|querySelector|progMeter|mUrl|init|split|u0020|running|substr|let|audio|innerHTML|showLrc|true|push|handleLrc|genPlayer|sort|u8f7b|u66fe|u5e74|u4e5f|lrcShow|slider|audioURL|arguments|prototype|constructor|apply|lastIndexOf|60|u00A9|new|Array|match|remove|wrong|event|start|error|paused|break|console|display|mouseup|mousedown|max|change|removeChild|none|100|timeupdate|pause|aniName|autoplay|src|loop|log|bgMove|createElement|ended|canplay|muted|appendChild|lrc|dataset'.split('|'),0,{}))

let lrctxt = `
作词 : 林煌坤\n 作曲 : 左宏元\n美酒加咖啡\n我只要喝一杯\n\n想起了过去\n又喝了第二杯\n明知道爱情像流水\n管他去爱谁\n我要美酒加咖啡\n一杯再一杯\n\n我并没有醉\n我只是心儿碎\n\n开放的花蕊\n你怎么也流泪\n如果你也是心儿碎\n陪你喝一杯\n我要美酒加咖啡\n一杯再一杯\n\n美酒加咖啡\n我只要喝一杯\n\n想起了过去\n\n又喝了第二杯\n\n明知道爱情像流水\n管他去爱谁\n我要美酒加咖啡\n一杯再一杯\n一杯再一杯\n一杯再一杯\n
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=237463.mp3"
}
let yP = new lrcPlayerY(opts);
yP.mObj.pause();
splay.onclick = () => {
yP.mObj.paused ? (yP.mObj.play(), vid.play(), splay.style.animationPlayState = 'running') :
(yP.mObj.pause(), vid.pause(), splay.style.animationPlayState = 'paused');
}
</script>

老谟深虑 发表于 2024-8-17 16:48

欣赏老师的精美音画，点赞！

梦油发表于 2024-8-17 16:55

梦江南发表于 2024-8-17 11:29
梦油老师，秀色可餐啊！

是的，是的。

梦江南 发表于 2024-8-17 17:12

起个网名好难发表于 2024-8-17 16:27
#papa {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;

奇怪了，我怎么点不动播放器呢。代码没动过。

梦江南 发表于 2024-8-17 17:13

起个网名好难发表于 2024-8-17 16:34
用我自己的代码，为避免冲突不自动开始播放

#oBlk {

你这帖更好看了。

梦江南 发表于 2024-8-17 17:14

老谟深虑发表于 2024-8-17 16:48
欣赏老师的精美音画，点赞！

谢谢老谟老师分享支持。下午好！{:4_204:}

梦江南 发表于 2024-8-17 17:15

梦油发表于 2024-8-17 16:55
是的，是的。

{:4_173:}{:4_173:}

起个网名好难 发表于 2024-8-17 17:17

梦江南发表于 2024-8-17 17:12
奇怪了，我怎么点不动播放器呢。代码没动过。

完全抄一楼的就换了歌曲、歌词

起个网名好难 发表于 2024-8-17 17:18

梦江南发表于 2024-8-17 17:13
你这帖更好看了。

急就章{:5_102:}

红影发表于 2024-8-17 17:30

梦江南发表于 2024-8-17 11:22
问好影子，这帖歌曲，本来是美酒加咖啡的，它只有2分多点长度，可是这一条线的播放器点不动，不会出歌词 ...

这个和音乐时长无关的啊，只要音乐能播放就可以呢。

红影发表于 2024-8-17 17:32

梦江南发表于 2024-8-17 11:24
如果不是这只歌词，视频是另一种效果。

嗯嗯，能去使用自己想要的视频就好{:4_187:}

红影发表于 2024-8-17 17:33

梦江南发表于 2024-8-17 11:25
谢谢影子欣赏支持鼓励。周末快乐！

问好江南，周六快乐{:4_187:}

小辣椒 发表于 2024-8-17 21:08

应该是视频中间有一闪吧

梦江南 发表于 2024-8-18 08:05

起个网名好难发表于 2024-8-17 17:17
完全抄一楼的就换了歌曲、歌词

不知是怎么回事，复制你的代码就会动了。

梦江南 发表于 2024-8-18 08:07

起个网名好难发表于 2024-8-17 17:18
急就章

”急就章“什么意思啊！{:4_173:}

梦江南 发表于 2024-8-18 08:08

红影发表于 2024-8-17 17:30
这个和音乐时长无关的啊，只要音乐能播放就可以呢。

音乐测试过了会唱的，唉，不知是啥原因。

梦江南 发表于 2024-8-18 08:11

红影发表于 2024-8-17 17:32
嗯嗯，能去使用自己想要的视频就好

知道了，下次按照自己的图意去找视频。
https://pic.imgdb.cn/item/666a6741d9c307b7e9aa2b68.gif

梦江南 发表于 2024-8-18 08:12

红影发表于 2024-8-17 17:33
问好江南，周六快乐

问好影子，周日快乐！{:4_187:}

梦江南 发表于 2024-8-18 08:13

小辣椒发表于 2024-8-17 21:08
应该是视频中间有一闪吧

日的，问好小辣椒，周日快乐！{:4_187:}

页: 1 [2] 3

花潮论坛's Archiver