如何将一般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
 

走马观花

最近的回复

  • 如果对操作不是很熟悉或者是操作不便的话,也可以在Windows的命令行执行NDK的安装。参数是一样的:
    Windows命令行安装NDK

    read more
  • 忘记补充图片了。这里需要点击更新安装才行。😆
    点击更新安装

    read more
  • 问:
    如何在Qt Creator安装NDK呢?
    除了那个🔽 按钮外,还有别的办法吗?
    答:
    Qt Creaator 4.11中更加整合了Android SDK Manager。其实大家都可以不运行默认的Android SDK Manager,直接在Qt Creator中选项->设备->Android,就可以进行操作了。

    通过````高级选项……,启动一些Android SDK Manager,只需要带上参数ndk-bundle```。原来没有NDK的你,也可以通过Android SDK Manager安装了。很简单吧。
    Android SDK Manager安装NDK

    read more
  • 挺好的分享,谢谢。1515759557.jpg

    read more

关注我们

微博
QQ群