如何将一般APlayer播放器调教成我们想要的播放器!



  • post_cover
    APlayer播放器是由DIYgod制作的一个html5播放器,简洁是它的优势。不过呢,它并不令我们满意,我们需要修改一下他们的脚本,把它调教成我们想要的播放器!

    因为我们这里做一个规定,默认情况下,播放器是播放24首歌曲,于是我们从互联网的这个位置:

    https://github.com/DIYgod/APlayer

    复制播放器源码到本地,找到APlayer.min.js,将

    <div class="aplayer-list
    

    修改为:

    <div class="aplayer-list aplayer-list-hide"
    

    接着,还需要将

    will-change: height}\n    .aplayer .aplayer-list.aplayer-list-hide {
    

    修改为:

    will-change: height; height:800px!important}\n    .aplayer .aplayer-list.aplayer-list-hide {
    

    就可以满足效果啦。
    不过,有人问为什么是800px呢?因为,我们是24首歌曲,每首歌曲项目列表的高度是33像素,因此我们需要24 × 33 =792像素,接近800像素,于是采用的是800了。

    最后,我们还需要在传入的时候指定listmaxheight类似这样:

    				var innerPlayer = new APlayer( {
    					element: document.getElementById( "aplayer1" ),
    					narrow: false,
    					autoplay: false,
    					showlrc: false,
    					theme: "#ad7a86",
    					listmaxheight: 33 * ( ( musics && musics.length )? ( musics.length + 0 ): 0 ) + "px",
    					music: musics
    				} );
    

    大功告成!这样就是我们调教好的播放器啦!



  • @jiangcaiyang123 我们网站还有视频???



  • @大黄老鼠 不是的哦,我们现在只是打算制作一个音乐播放器哦,但是这个音乐播放器可以悬浮也可以固定的哦。现在还在制作呢。



  • @jiangcaiyang 现在社区用的不是这个吗? 我看他给的Demo 好像啊



  • @大黄老鼠 是的,我们就是用这样的音乐播放器样式。接下来呢,我们打算在此基础上发展一下,把它做得更加好。主要是能够做到悬浮的效果。


Log in to reply
 

走马观花

最近的回复

  • G

    北京名律免费法律咨询,解决您的法律困扰,如果您眼下没有遇到法律上的问题,也可以留一位大律师的联系方式以备不时之需!ccfd91efc3a6b2ed0e79054d2248eed.jpg bf6015b383483f1fe83cdcfd130fc6b.jpg 2f347879129add1096bf3424edbe517.jpg

    read more
  • G

    北京名律免费法律咨询,解决您的法律困扰,如果您眼下没有遇到法律上的问题,也可以留一位大律师的联系方式以备不时之需!微信图片_20200210141336.png 微信图片_20200210141333.png 微信图片_20200210141329.png

    read more
  • G

    北京名律免费法律咨询,解决您的法律困扰,如果您眼下没有遇到法律上的问题,也可以留一位大律师的联系方式以备不时之需!

    read more

关注我们

微博
QQ群