Casablanca『卡萨布兰卡』

竹轩听雨

空心树 发表于 2020-5-14 21:50
这个播放器真好，听雨介绍的也很详尽，做贴可以用用

其实就是想解决动画播放器手机听不到音乐的问题。树树喜欢也可以试用一下。

竹轩听雨

落墨惊云 发表于 2020-5-14 23:33
看了一下，播放器果然可以用手机听，漂亮又实用

惊云说的全是关键词啊，我也想知道你们的手机能不能听到。
这款播放器主要想解决两个问题，第一就手机能听，第二就美化帖面。
还记得我让你学代码吧，以你现在的代码基础想用就可以用的。
有时看到你们写的文字和帖面都很好，播放器界面却跟不上。
之前我做了十套这种播放器的界面，因为有些问题，就没发出来。
现在都解决了，慢慢全会发出来的。

竹轩听雨

蝶洛 发表于 2020-5-15 16:54
非常实用，又漂亮，听雨有时间可多制作几款呀。。。

一直喜欢蝶洛发帖，非常精致。我曾想过为你单独定制一款个性的播放器。
原来QQ迷你播放器有上千款之多，现在能找到也就几十款，你手里有喜欢可以给我来做。
我已从中选中了十款，做完了，有时间会整理一下发出来的。
这个播放器使用时不要在同一页中同时发两个，播放控件会有冲突。

竹轩听雨

蝶洛 发表于 2020-5-15 16:54
非常实用，又漂亮，听雨有时间可多制作几款呀。。。

播放器居左单独发帖的代码：

1. <br/>
   
2. <div align="left" style="position: relative;">
   
3. <script type="text/javascript">
   
4. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/jquery.js"></sc"+"ript>")
   
5. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/player.js"></sc"+"ript>")
   
6. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/bottle/player/displayer.js"></sc"+"ript>")
   
7. </script>
   
8. <link href="http://webftp.bbs.hnol.net/sxrx2016/players/bottle/player/player.css" rel="stylesheet" type="text/css">
   
9. <div style="margin: 0px auto;">
   
10. <p align="left"><img width="210" height="90" src="http://webftp.bbs.hnol.net/sxrx2016/players/bottle/image/player.png" border="0"></p>
    
11. <embed width="210" height="90" align="left" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://webftp.bbs.hnol.net/sxrx2016/players/bottle/image/flash.swf?url=&amp;bgcolor=000000&amp;color=000000" type="application/x-shockwave-flash" style="left: 0%; top: 0%; margin-top: 0px; margin-left: 0px; position: absolute;" wmode="transparent" invokeurls="false" </embed>
    
12. <div id="displayers" style="left: 0%; top: 50%; width: 100%; height: 100%; margin-top: 0px; margin-left: 0px; display: block; position: absolute;">
    
13.         <ul class="player-audios" style="display: none;">
    
14.             <li data-title="诗经里-平安">
    
15.                 <div class="player-source" data-type="audio/mpeg" data-src="https://music.163.com/song/media/outer/url?id=1434001744.mp3">
    
16.             </div></li>
    
17.         </ul>
    
18.     </div>
    
19. </div>
    
20. </div>

复制代码

落墨惊云

竹轩听雨 发表于 2020-5-15 15:20
惊云说的全是关键词啊，我也想知道你们的手机能不能听到。
这款播放器主要想解决两个问题，第一就手机能 ...

没想到这播放器是你自己做的呀？太厉害了

竹轩听雨

蝶洛 发表于 2020-5-15 16:54
非常实用，又漂亮，听雨有时间可多制作几款呀。。。

做了一款播放器播放器送蝶洛

竹轩听雨

蝶洛 发表于 2020-5-16 17:54 21楼，我去了一个png的素材，这样是不是更简洁些，只是那个黑色的框我不知怎么处理了。。。

竹轩听雨

播放器居左的代码：

1. <br/>
   
2. <div align="left" style="position: relative;">
   
3. <script type="text/javascript">
   
4. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/jquery.js"></sc"+"ript>")
   
5. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/player.js"></sc"+"ript>")
   
6. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/player/displayer.js"></sc"+"ript>")
   
7. </script>
   
8. <link href="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/player/player.css" rel="stylesheet" type="text/css">
   
9. <div style="margin: 0px auto;">
   
10. <p align="left"><img width="200" height="80" src="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/image/player.png" border="0"></p>
    
11. <embed width="200" height="80" align="left" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/image/flash.swf?url=&amp;bgcolor=000000&amp;color=000000" type="application/x-shockwave-flash" style="left: 0%; top: 0%; margin-top: 0px; margin-left: 0px; position: absolute;" wmode="transparent" invokeurls="false" </embed>
    
12. <div id="displayers" style="left: 0%; top: 50%; width: 100%; height: 100%; margin-top: 0px; margin-left: 0px; display: block; position: absolute;">
    
13.         <ul class="player-audios" style="display: none;">
    
14.             <li data-title="诗经里-平安">
    
15.                 <div class="player-source" data-type="audio/mpeg" data-src="https://music.163.com/song/media/outer/url?id=1434001744.mp3">
    
16.             </div></li>
    
17.         </ul>
    
18.     </div>
    
19. </div>
    
20. </div>

复制代码

竹轩听雨

播放器居中的代码：

1. <br>
   
2. <div align="center" style="position: relative;">
   
3. <script type="text/javascript">
   
4. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/jquery.js"></sc"+"ript>")
   
5. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/player.js"></sc"+"ript>")
   
6. document.write("<scr"+"ipt src="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/player/displayer.js"></sc"+"ript>")
   
7. </script>
   
8. <link href="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/player/player.css" rel="stylesheet" type="text/css">
   
9. <div style="margin: 0px auto;">
   
10. <p align="center"><img width="200" height="80" src="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/image/player.png" border="0"></p>
    
11. <embed width="200" height="80" align="center" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://webftp.bbs.hnol.net/sxrx2016/players/butterfly/image/flash.swf?url=&amp;bgcolor=000000&amp;color=000000" type="application/x-shockwave-flash" style="left: 50%; top: 50%; margin-top: -40px; margin-left: -100px; position: absolute;" wmode="transparent" invokeurls="false" </embed>
    
12. <div id="displayers" style="left: 50%; top: 50%; width: 100%; height: 100%; margin-top: 0px; margin-left: -100px; display: block; position: absolute;">
    
13.         <ul class="player-audios" style="display: none;">
    
14.             <li data-title="诗经里-平安">
    
15.                 <div class="player-source" data-type="audio/mpeg" data-src="https://music.163.com/song/media/outer/url?id=1434001744.mp3">
    
16.             </div></li>
    
17.         </ul>
    
18.     </div>
    
19. </div>
    
20. </div>

复制代码

竹轩听雨

蝶洛 发表于 2020-5-16 19:17
好多喜欢的呀，会不会太麻烦你了。。。先挑了这两款。。。

第一款我也喜欢，这个做完了。
第二款也好看有时间我给你做，
你喜欢的你就说，不麻烦的。