论坛 › 音乐沙龙 › 人间道

绿叶清舟 发表于 2024-9-2 10:36

人间道

本帖最后由 绿叶清舟 于 2024-9-2 14:40 编辑 <br /><br /><style>
#papa {
        margin: 30px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://pic.imgdb.cn/item/66d46e5cd9c307b7e9ad641a.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
}
#papa > video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        transform: rotateX(180deg);
        pointer-events: none;
}
</style>

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec496c9a706d.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/mplayer.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#papa',
                musics: music_ar,
                title: '人间道',
                player_css: `
                        bottom: 20px;
                        background: none;
                        border: thick inherit #f3e6b1;
                        color: white;
                        --ww: 300px;
                        --hh: 140px;
                        --track: #f3e6b1;
                        --prog: #d0ac57;
                `,
                fs_css: 'top: 20px; background: none;',
        });
};
var music_ar = [
        ['outer/url?id=35041000', '道道道'],
        ['outer/url?id=2106733974', '人间道'],
        ['outer/url?id=2605173458', '人间道'],
        ['outer/url?id=2110332514', '人间道'],
        ['outer/url?id=1386056447', '人间道好迷茫'],
               
].map(item => {
        item = 'https://music.163.com/song/media/' + item;
        return item;
});
</script>

马黑黑 发表于 2024-9-2 12:54

{:4_199:}

马黑黑 发表于 2024-9-2 12:55

全屏按钮背景应设为透明

马黑黑 发表于 2024-9-2 12:55

或黑色

梦江南 发表于 2024-9-2 13:36

欣赏老师音画佳作！

绿叶清舟 发表于 2024-9-2 14:41

马黑黑 发表于 2024-9-2 12:55
全屏按钮背景应设为透明

是想过啊，可是没找到改的地方，就没想到可以加的

马黑黑 发表于 2024-9-2 14:43

绿叶清舟 发表于 2024-9-2 14:41
是想过啊，可是没找到改的地方，就没想到可以加的

看看配置文档

绿叶清舟 发表于 2024-9-2 14:45

马黑黑 发表于 2024-9-2 12:55
或黑色

想到你那个不用背影代码了

绿叶清舟 发表于 2024-9-2 14:46

梦江南 发表于 2024-9-2 13:36
欣赏老师音画佳作！

谢谢江南支持

绿叶清舟 发表于 2024-9-2 14:47

马黑黑 发表于 2024-9-2 14:43
看看配置文档

加了个background: none;，原来只要找颜色没发现了

彩云归 发表于 2024-9-2 15:22

欣赏佳作，谢谢分享！

马黑黑 发表于 2024-9-2 17:05

绿叶清舟 发表于 2024-9-2 14:47
加了个background: none;，原来只要找颜色没发现了

全屏按钮和播放器是分开配置的，说明文档也给出详细的配置举例

小辣椒 发表于 2024-9-2 20:25

清舟这个边框修改的漂亮，而且改的这个代码（inherit）我还是第一次看见，小辣椒过几天学习做一次

小辣椒 发表于 2024-9-2 20:27

效果特别好，小辣椒欣赏加学习{:4_199:}

绿叶清舟 发表于 2024-9-2 20:34

彩云归 发表于 2024-9-2 15:22
欣赏佳作，谢谢分享！

谢谢彩云，晚上好

绿叶清舟 发表于 2024-9-2 20:34

马黑黑 发表于 2024-9-2 17:05
全屏按钮和播放器是分开配置的，说明文档也给出详细的配置举例

看的时候知道了，一到用的时候又想不起来了嘛

绿叶清舟 发表于 2024-9-2 20:37

小辣椒 发表于 2024-9-2 20:25
清舟这个边框修改的漂亮，而且改的这个代码（inherit）我还是第一次看见，小辣椒过几天学习做一次

这个代码经常在用的，就是挤码堆里没发现了{:4_189:}，俺也是翻笔记才发现的了“从父元素继承边框样式”

小辣椒 发表于 2024-9-2 20:43

绿叶清舟 发表于 2024-9-2 20:37
这个代码经常在用的，就是挤码堆里没发现了，俺也是翻笔记才发现的了“从父元素继承边框样式”

今天我知道了，我去百度了一下，还是没有明白后面就知道了

马黑黑 发表于 2024-9-2 20:57

绿叶清舟 发表于 2024-9-2 20:34
看的时候知道了，一到用的时候又想不起来了嘛

眼睛戴的不合适

绿叶清舟 发表于 2024-9-2 21:20

马黑黑 发表于 2024-9-2 20:57
眼睛戴的不合适

眼睛只管看不管记的了

查看完整版本: 人间道