花飞飞 发表于 2023-8-1 22:19

瞬间（学习黑师带进度条频谱条播放器效果）

<style>
    #mydiv { margin: 0 0 0 calc(50% - 720px); display: grid; place-items: center; width: 1300px; height: 700px; background: lightblue url('https://s1.ax1x.com/2023/08/01/pPCcutK.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.green { color: green; }
#vid {
        position: absolute;
        width: 120%;
        height: 110%;
        top:-10px;
        left:-50px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
        opacity: .20;
}
    </style>

    <div id="mydiv"><video id="vid" src="https://img3.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay="" loop="" muted=""></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=410714658" autoplay="" loop=""></audio>

    <script>
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/pinpu_lrc.js';
    document.head.appendChild(script);

    (function() {
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      window.onload = () => {
            HCPlayer({
                papa: '#mydiv',
                lrcAr: lrcAr,
                lrc_css: 'right: 100px; bottom: 30px;--bg: linear-gradient(SaddleBrown,Peru);',
                player_css: 'right: 100px; bottom: 100px; --track: #eee; --prog: SaddleBrown; --cap: silver;',
                pinpu: {num: 60, width: 3, height: 160, color: 'linear-gradient(to top, Peru, SaddleBrown)'}
            });
      };
    })();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
    </script>

马黑黑 发表于 2023-8-1 22:20

图片打开偏慢，其他啥都是美美哒

花飞飞 发表于 2023-8-1 22:21

@马黑黑 老师瞧瞧。。更改完毕。。。有那些说明就好改了。。。

马黑黑 发表于 2023-8-1 22:21

花飞飞 发表于 2023-8-1 22:21
@马黑黑 老师瞧瞧。。更改完毕。。。有那些说明就好改了。。。

插件的主要设置，也不算复杂，看看能懂

花飞飞 发表于 2023-8-1 22:24

马黑黑 发表于 2023-8-1 22:20
图片打开偏慢，其他啥都是美美哒

{:5_106:}路过图床的。。。。
你那个随意云是不是就是你可以外链的常用的网盘。。。

花飞飞 发表于 2023-8-1 22:25

马黑黑 发表于 2023-8-1 22:21
插件的主要设置，也不算复杂，看看能懂

对着说明一看，每个项目都在里面，不过写成了一行。。。。。{:5_117:}

红影 发表于 2023-8-1 22:52

好美的画面。播放器的配色也和画面很协调，飞飞好棒的制作{:4_199:}

马黑黑 发表于 2023-8-1 23:00

花飞飞 发表于 2023-8-1 22:25
对着说明一看，每个项目都在里面，不过写成了一行。。。。。

不怕长的建议写成一行

马黑黑 发表于 2023-8-1 23:01

花飞飞 发表于 2023-8-1 22:24
路过图床的。。。。
你那个随意云是不是就是你可以外链的常用的网盘。。。

随意云要缴费

花飞飞 发表于 2023-8-2 08:17

马黑黑 发表于 2023-8-1 23:01
随意云要缴费

看老师一直在用，应该是值得的。。

花飞飞 发表于 2023-8-2 08:18

马黑黑 发表于 2023-8-1 23:00
不怕长的建议写成一行

怕。。小白觉得还是折行的好{:4_170:}

花飞飞 发表于 2023-8-2 08:18

红影 发表于 2023-8-1 22:52
好美的画面。播放器的配色也和画面很协调，飞飞好棒的制作

谢谢影子一直鼓励{:4_204:}

马黑黑 发表于 2023-8-2 08:18

花飞飞 发表于 2023-8-2 08:17
看老师一直在用，应该是值得的。。

兜里老有六毛的可以考虑

花飞飞 发表于 2023-8-2 08:20

马黑黑 发表于 2023-8-2 08:18
兜里老有六毛的可以考虑

翻了下只有三毛，考虑一下过分不{:4_170:}

马黑黑 发表于 2023-8-2 08:20

花飞飞 发表于 2023-8-2 08:20
翻了下只有三毛，考虑一下过分不

歇歇吧

马黑黑 发表于 2023-8-2 08:21

花飞飞 发表于 2023-8-2 08:18
怕。。小白觉得还是折行的好

写代码时应分行，便于修改

花飞飞 发表于 2023-8-2 08:24

马黑黑 发表于 2023-8-2 08:20
歇歇吧

好{:4_170:}

花飞飞 发表于 2023-8-2 08:26

马黑黑 发表于 2023-8-2 08:21
写代码时应分行，便于修改

对小白来说更便于理解

红影 发表于 2023-8-2 13:27

花飞飞 发表于 2023-8-2 08:18
谢谢影子一直鼓励

这个画面真的看得很舒服呢{:4_187:}

小文 发表于 2023-8-3 15:14

高手！
页: [1] 2
查看完整版本: 瞬间（学习黑师带进度条频谱条播放器效果）