马黑黑 发表于 2023-9-16 23:16

极简播放器插件

<style>
#mydiv {
        margin: 20px auto;
        width: 700px;
        height: 400px;
        background: linear-gradient(to top right, lightgreen,black);
        box-shadow: 0 0 10px #333;
        overflow: hidden;
        position: relative;
        --state: paused;
}

</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1926943356" autoplay loop></audio>

<script>

(function() {

let script = document.createElement('script');
script.charset = 'utf-8';
script.src ='https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);

script.onload = () => {
        HCPlayer({
                papa: '#mydiv',
                player_css: 'left: 10px; bottom: 10px;',
                img: {
                        enter: '',/* 进入全屏按钮地址 */
                        quit: '',/* 退出全屏按钮地址 */
                        play: '',/* 播放按钮地址 */
                        pause: '',/* 暂停按钮地址 */
                }
        });
};

})();

</script>

马黑黑 发表于 2023-9-16 23:18

代码
<style>
#mydiv {
        margin: 20px auto;
        width: 700px;
        height: 400px;
        background: linear-gradient(to top right, lightgreen,black);
        box-shadow: 0 0 10px #333;
        overflow: hidden;
        position: relative;
        --state: paused;
}

</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1926943356" autoplay loop></audio>

<script>

let script = document.createElement('script');
script.charset = 'utf-8';
script.src ='https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);

script.onload = () => {
        HCPlayer({
                papa: '#mydiv',
                player_css: 'left: 10px; bottom: 10px;',
                img: {
                        enter: '',/* 进入全屏按钮地址 */
                        quit: '',/* 退出全屏按钮地址 */
                        play: '',/* 播放按钮地址 */
                        pause: '',/* 暂停按钮地址 */
                }
        });
};

</script>

马黑黑 发表于 2023-9-16 23:22

可自定义按钮，仅需将 img: {} 配置中的空值填上图片地址。图片尺寸建议小巧，16*16 ~ 100*100 为宜。若使用默认图片，可删掉 img: {} 配置。

马黑黑 发表于 2023-9-16 23:26

个人觉得这个播放器对大图分享帖子很友好

@东篱闲人 @千羽

红影 发表于 2023-9-17 08:25

这个好，两个按钮都能替换图片，非常方便{:4_199:}

红影 发表于 2023-9-17 08:27

尤其播放器按钮，很小巧，适合安放在图片中的适当位置，让音乐的播放得到控制。

红影 发表于 2023-9-17 08:28

按钮还是隐藏的，鼠标滑过才出现，更不会破坏页面。
黑黑考虑得真周到{:4_199:}

亦是金 发表于 2023-9-17 08:29

谢谢老师分享！欣赏学习了！{:4_176:}

东篱闲人 发表于 2023-9-17 09:02

马黑黑 发表于 2023-9-16 23:26
个人觉得这个播放器对大图分享帖子很友好

@东篱闲人 @千羽

{:4_187:}

东篱闲人 发表于 2023-9-17 09:02

这个确实很漂亮！{:4_204:}

马黑黑 发表于 2023-9-17 09:05

东篱闲人 发表于 2023-9-17 09:02
这个确实很漂亮！

你可以自己设计按钮，共四个。

马黑黑 发表于 2023-9-17 09:06

红影 发表于 2023-9-17 08:25
这个好，两个按钮都能替换图片，非常方便

这类功能以前有过示例的，这里只是把功能放插件里

马黑黑 发表于 2023-9-17 09:06

东篱闲人 发表于 2023-9-17 09:02


谢花

马黑黑 发表于 2023-9-17 09:07

红影 发表于 2023-9-17 08:27
尤其播放器按钮，很小巧，适合安放在图片中的适当位置，让音乐的播放得到控制。
这里是 32*32 的，我试过 16*16 的，也还可以，但是 @小辣椒可能会有意见{:4_170:}

东篱闲人 发表于 2023-9-17 09:07

马黑黑 发表于 2023-9-17 09:05
你可以自己设计按钮，共四个。

俺琢磨琢磨。。

马黑黑 发表于 2023-9-17 09:08

红影 发表于 2023-9-17 08:28
按钮还是隐藏的，鼠标滑过才出现，更不会破坏页面。
黑黑考虑得真周到

对呀，@千羽 说她的大图如果放播放器，别人会认为另类{:4_170:}

马黑黑 发表于 2023-9-17 09:08

亦是金 发表于 2023-9-17 08:29
谢谢老师分享！欣赏学习了！

周末好

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

东篱闲人 发表于 2023-9-17 09:07
俺琢磨琢磨。。

我这是用svg设计，然后存图，后来发现，网上这类按钮很多

红影 发表于 2023-9-17 09:57

马黑黑 发表于 2023-9-17 09:06
这类功能以前有过示例的，这里只是把功能放插件里

一般会想到把按钮换图片，全屏大都是文字吧{:4_173:}

红影 发表于 2023-9-17 10:01

马黑黑 发表于 2023-9-17 09:07
这里是 32*32 的，我试过 16*16 的，也还可以，但是 @小辣椒可能会有意见

16的可能是小了点{:4_173:}
页: [1] 2 3 4 5 6 7 8 9
查看完整版本: 极简播放器插件