极简播放器插件

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 700px;
   
5.         height: 400px;
   
6.         background: linear-gradient(to top right, lightgreen,black);
   
7.         box-shadow: 0 0 10px #333;
   
8.         overflow: hidden;
   
9.         position: relative;
   
10.         --state: paused;
    
11. }
    
12. 
    
13. </style>
    
14. 
    
15. <div id="mydiv"></div>
    
16. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1926943356" autoplay loop></audio>
    
17. 
    
18. <script>
    
19. 
    
20. let script = document.createElement('script');
    
21. script.charset = 'utf-8';
    
22. script.src ='https://638183.freep.cn/638183/web/api/simpleplayer.js';
    
23. document.body.appendChild(script);
    
24. 
    
25. script.onload = () => {
    
26.         HCPlayer({
    
27.                 papa: '#mydiv',
    
28.                 player_css: 'left: 10px; bottom: 10px;',
    
29.                 img: {
    
30.                         enter: '',/* 进入全屏按钮地址 */
    
31.                         quit: '',/* 退出全屏按钮地址 */
    
32.                         play: '',/* 播放按钮地址 */
    
33.                         pause: '',/* 暂停按钮地址 */
    
34.                 }
    
35.         });
    
36. };
    
37. 
    
38. </script>

复制代码

马黑黑

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

马黑黑

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

@东篱闲人 @千羽

红影

这个好，两个按钮都能替换图片，非常方便

红影

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

红影

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

亦是金

谢谢老师分享！欣赏学习了！

东篱闲人

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

@东篱闲人 @千羽

东篱闲人

这个确实很漂亮！

马黑黑

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

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

马黑黑

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

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

马黑黑

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

谢花

马黑黑

红影 发表于 2023-9-17 08:27
尤其播放器按钮，很小巧，适合安放在图片中的适当位置，让音乐的播放得到控制。

这里是 32*32 的，我试过 16*16 的，也还可以，但是 @小辣椒可能会有意见

东篱闲人

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

俺琢磨琢磨。。

马黑黑

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

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

马黑黑

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

周末好

马黑黑

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

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

红影

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

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

红影

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

16的可能是小了点