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

走马观花

最近的回复

  • 离线安装包的下载地址是:coding源github源

    read more
  • 看到过很多代码都有用这个

    read more
  • 做得还不错的嘛。希望继续呢。

    read more
  • 首先我看到的就是option选项。这个选项在cmake中的文档是这样的:

    Now let us consider making the MathFunctions library optional. In this tutorial there really isn’t any reason to do so, but with larger libraries or libraries that rely on third party code you might want to. The first step is to add an option to the top level CMakeLists file.

    # should we use our own math functions? option (USE_MYMATH "Use tutorial provided math implementation" ON)

    This will show up in the CMake GUI with a default value of ON that the user can change as desired. This setting will be stored in the cache so that the user does not need to keep setting it each time they run CMake on this project. The next change is to make the build and linking of the MathFunctions library conditional. To do this we change the end of the top level CMakeLists file to look like the following:

    # add the MathFunctions library? # if (USE_MYMATH) include_directories ("${PROJECT_SOURCE_DIR}/MathFunctions") add_subdirectory (MathFunctions) set (EXTRA_LIBS ${EXTRA_LIBS} MathFunctions) endif (USE_MYMATH) # add the executable add_executable (Tutorial tutorial.cxx) target_link_libraries (Tutorial ${EXTRA_LIBS}) 参考来源:这里

    在我看来,cmake中的option命令更像是一个宏,规定了是否定义这个宏以及这个宏所带来的连锁反应。option规定的这个宏,通过ON的设定来表示是否定义。

    read more

关注我们

微博
QQ群