论坛 › 音乐沙龙 › 哭过的天空 TO：走过岁月 （学习黑黑小播效果）

小辣椒 发表于 2023-9-9 17:02

哭过的天空 TO：走过岁月 （学习黑黑小播效果）

<meta charset="UTF-8">
<style>#papa {margin: 150px 0 0 calc(50% - 801px); width: 1440px; height: 731px;
border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
background: url('https://xlaj.cn/bfq/20230828/09.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
z-index: 1;
position: relative;
overflow: hidden;
animation: hue 10s infinite alternate var(--state);
}
#vid {
        position: absolute;
        width: 120%;
        height: 110%,
        bottom:-100px;
        left:-50px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
        opacity: .66;
}
@keyframes hue {
      to { filter: hue-rotate(360deg); }}
</style><div id="papa">

<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay="" loop="" muted="">
</video></div><audio id="aud" src="https://xlaj.cn/bfq/20230828/clip.mp3" autoplay="" loop=""></audio>
<script>let script = document.createElement('script');
    script.src = 'https://xlaj.cn/bfq/20230828/osc_lrc.js';
script.charset = 'utf-8';
    document.head.appendChild(script);
    (function() {
    let geci = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
   script.onload = () => {
       HCPlayer({
        papa: '#papa', /* 宿主元素 */
        lrcAr: geci, /* 歌词 */
        lrc_css: `
                top: 80px; left:200px; /* 位置 */
                color: WhiteSmoke;/* 歌词底色 */
                --bg: linear-gradient(Chocolate,Chocolate);* 歌词同步颜色 */
        `,
        player_css: `
                bottom: 3%; left:41%; /* 位置 */
                --track: Chocolate; /* 底轨颜色 */
                --prog: Snow; /* 进度颜色 */
                --ww: 350px; /* 示波宽度 */
      
        `,
       
      });
   };
})();
runCodes(codePre.innerText);</script>

小辣椒 发表于 2023-9-9 17:04

@走过岁月
谢谢岁月的礼物，身体才恢复就上来了，不急着玩，好好休养着。。。

小辣椒 发表于 2023-9-9 17:05

@马黑黑

黑黑我忘记这个是你那个帖的播放器了，我是收藏没有做的就做了一个

马黑黑 发表于 2023-9-9 17:42

小辣椒 发表于 2023-9-9 17:05
@马黑黑

黑黑我忘记这个是你那个帖的播放器了，我是收藏没有做的就做了一个

漂亮就行{:4_170:}

亦是金 发表于 2023-9-9 20:15

本帖最后由 亦是金 于 2023-9-9 20:18 编辑

问好小辣椒！{:4_187:}
全屏按钮的文字出现乱码，去修正。
<span id="btnFs">点击全屏</span>，

document.addEventListener("fullscreenchange", () => { if (document.fullscreenElement !== null) { fs = true; btnFs.innerText = '点击退出全屏或按Esc键退出';} else { fs = false; btnFs.innerText = '再来一次全屏 ^O^'; } });

红影 发表于 2023-9-9 21:12

亲爱的制作真美，尤其颜色搭配和背景特别协调，很赞{:4_199:}

红影 发表于 2023-9-9 21:17

全屏文字的确出现乱码了，好像也不用像亦是金老师说得那么麻烦，只要加上script.charset = 'utf-8';就可以{:4_173:}

红影 发表于 2023-9-9 21:19

这雨天也正是哭过的天空呢。视频用选得也不错。欣赏亲爱的好帖，岁月收礼开心{:4_187:}

白开水 发表于 2023-9-9 21:28

太漂亮的。赞个

走过岁月 发表于 2023-9-9 21:35

开心地来收礼 {:4_204:}

走过岁月 发表于 2023-9-9 21:38

这图做得漂亮，小辣椒作图也很棒

走过岁月 发表于 2023-9-9 21:38

播放器也不错，赞

走过岁月 发表于 2023-9-9 21:39

谢谢小辣椒的礼物 {:4_204:}

小文 发表于 2023-9-9 22:01

欣赏{:4_187:}

小辣椒 发表于 2023-9-9 22:02

亦是金 发表于 2023-9-9 20:15
问好小辣椒！
全屏按钮的文字出现乱码，去修正。
点击全屏，

这个很奇怪呢，小风哪里是好的

哭过的天空
https://mp3.wf/forum.php?mod=viewthread&tid=266
(出处: 微风音乐)

小辣椒 发表于 2023-9-9 22:03

红影 发表于 2023-9-9 21:17
全屏文字的确出现乱码了，好像也不用像亦是金老师说得那么麻烦，只要加上script.charset = 'utf-8';就可以{ ...

亲爱的，我也是感觉奇怪我直接服务器修改的，我自己哪里是好的，怎么这里会乱码？

小辣椒 发表于 2023-9-9 22:04

白开水 发表于 2023-9-9 21:28
太漂亮的。赞个

夕夕好{:4_173:}

好久没有碰到了，先来个大大{:4_179:}

小辣椒 发表于 2023-9-9 22:05

走过岁月 发表于 2023-9-9 21:35
开心地来收礼

岁月还是上来了啊{:4_179:}

小辣椒 发表于 2023-9-9 22:06

走过岁月 发表于 2023-9-9 21:38
这图做得漂亮，小辣椒作图也很棒

这些都是旧图，那个时候玩swf时做的图，现在眼睛不好已经不做了，播放器也是少玩了，岁月以前其实作图也是很漂亮的

小辣椒 发表于 2023-9-9 22:07

走过岁月 发表于 2023-9-9 21:38
播放器也不错，赞

其实我最近状态不好，做播放器也是拖了许多作业了，不能长时间看代码

查看完整版本: 哭过的天空 TO：走过岁月 （学习黑黑小播效果）