MENU

手动引入APlayer,Meting,DPlayer

如不能正常显示,请刷新一下本页

打算少用插件以便提升速度,于是决定调用 html 版本的两个播放器,方法简单粗暴,有点小 bug 但不影响使用

head 插入如下 css,js 文件:

<!-- APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<!-- MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>

<!-- DPlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

APlayer 迷你:

!!!
<div id="aplayer"></div>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    mini: true,
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'https://pan.cdn.vin/d/OD5T/music/%E5%BC%A0%E4%B8%89%E7%9A%84%E6%AD%8C.m4a',
        cover: 'https://ii.do/favicon.ico'
    }]
});
</script>
!!!

Meting 歌单:

!!!
<meting-js server="netease" type="playlist" id="5136593474"></meting-js>
!!!

Meting 歌曲:

!!!
<meting-js auto="http://music.163.com/#/song?id=27808295"></meting-js>
!!!

DPlayer:

!!!
<div id="dplayer"></div>
<script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://pan.cdn.vin/d/OD5T/music/%E6%B9%98%E9%9B%A8%E8%B0%A3.mp4',
    },
});
</script>
!!!

演示仅为个人常用,更多详细参数请看官方文档:
https://aplayer.js.org/#/zh-Hans/
https://github.com/metowolf/MetingJS
http://dplayer.js.org/zh/

至于 PJAX 啥子的我就不晓得弄了

最后编辑于: 2021 年 09 月 14 日
添加新评论

已有 15 条评论
  1. AKERS AKERS

    测试可行啊,不过要禁用插件才行,又得挨个挨个把所有帖子改了。体力活。插件有一定的不兼容性而这个兼容,我那个插件突然放不了歌单了。要是能添加个按钮在编辑界面就好了,这样复制代码,需要到特定位置复制,就有点复杂。
    你这个多选项卡在哪里弄的?是主题自带的吗?

    1. @AKERS主题自带,你可以数据库SQL批量替换