首页 技术交流正文

苹果CMS V10 整合 APLAYER音乐播放器。

admin 技术交流 2020-04-03 83 0

昨天发现Aplayer的播放代码好少,而且功能很强大,今天早上就试着整合了一下小说播放器,本人不怎么精通CSS,用jplayer虽然也能播放,但是在手机页面,Jplayer的显示不是很理想,可是aplayer就完全能自动缩小,很是强大。

试着在player文件夹里新建三个文件 aplayer.html   aplayer.js   和系统自带的 APlayer.min.js   APlayer.min.css    一共四个文件,放到网站static/player目录下,

1、修改aplayer.html代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" charset="utf-8">

        import '/static/player/APlayer.min.css';

        import APlayer from 'aplayer';

        const ap = new APlayer(options);

    </script>

</head>

<body>

    <link rel="stylesheet" href="/static/player/APlayer.min.css">

    <div id="aplayer"></div>

    <script src="/static/player/APlayer.min.js"></script>

    <script type="text/javascript" charset="utf-8">

    const ap = new APlayer({

     autoplay: true,

    container: document.getElementById('aplayer'),

    audio: [{

        name: parent.MacPlayer.playname,

        artist: 'artist',

        url: parent.MacPlayer.PlayUrl,

        cover: parent.MacPlayer.playpic

}]

//以下是 自动播放下一集代码。

});

ap.on('ended', function () {

   if(parent.MacPlayer.PlayLinkNext!=''){

            top.location.href = parent.MacPlayer.PlayLinkNext;

        }

});


    </script>

</body>

</html>

2、修改aplayer.js代码如下:

MacPlayer.Html = '<iframe width="100%" height="100%" src="/static/player/aplayer.html" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';

MacPlayer.Show();


然后再上传别外两个aplayer.min.js  和aplayer.min.css .

现在有一个问题,那就是代播放页上的导航不能显示小说名称和调取图片。


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论