No Comments

给博客换上好看的播放器：cPlayer、DPlayer

简介

  • cPlayer：是一个漂亮的html5音乐播放器，支持解析本地和网易云音乐单曲、歌单、专辑、歌手id的解析。
  • DPlayer：是一个支持弹幕的漂亮的视频播放器，支持哔哩哔哩的弹幕解析。

下载和安装

下载

cPlayer插件发布地址：https://github.com/journey-ad/cPlayer-Typecho-Plugin

DPlayer插件发布地址：https://github.com/MoePlayer/DPlayer-Typecho

拉取程序至typecho程序的/usr/plugins目录下

# 进入typecho程序插件目录
cd /网站地址/usr/plugin
# cPlayer程序拉取
git clone https://github.com/journey-ad/cPlayer-Typecho-Plugin.git
# DPlayer程序拉取
git clone https://github.com/MoePlayer/DPlayer-Typecho.git

安装

安装前保证插件可读可写，否则会导致网站访问缓慢。

重命名 cPlayer-Typecho-Plugin 为 cPlayer，否则cPlayer将无法启动

mv cPlayer-Typecho-Plugin cPlayer

重命名 DPlayer-Typecho 为 DPlayer ,否则DPlayer将不生效将无法启动

mv DPlayer-Typecho DPlayer

访问网站地址管理界面，启动插件即可。

配置

cPlayer

访问插件管理界面，设置cPlayer。

music_U这个设置是保证获取歌单的完整性，如果不填写music_U，歌单将极大几率只返回一首。

  • 如何获取：

    1、访问网易云音乐官方网站，登陆账号，打开开发者工具。

    2、开发者工具选择 Application，点开左侧的Cookies栏，点击https://music.163.com，你将可以看到 NAME为MUSIC_U的数据表，复制 Value ，如图：

  • 配置MUSIC_U：

    在MUSIC_U字段上里填写：MUSIC_U=刚才复制的Value。保存即可。

DPlayer

访问插件管理界面，设置DPlayer。

开启 HLS支持 和 FLV 来支持m3u8和flv格式的视频。

弹幕服务器地址 默认是DPlayer开发者DIYgod自建的弹幕服务器接口，你也可以自建弹幕服务器接口。

自建DPlayer弹幕服务器接口地址：https://github.com/MoePlayer/DPlayer-node.git

其他

让cPlayer在手机上显示进度条

cPlayer默认在宽度600px以内就不显示进度条了，以至于绝大数手机都无法显示进度条，无法控制音乐进度。

可以通过修改css样式的方法来让宽度低于600px的屏幕也显示进度条，因为cPlayer插件添加了SRI认证，直接修改插件文件会导致播放器无法使用，因此通过 !important 的方法强制覆盖掉cPlayer的样式。

打开主题的css样式表，在最后加入以下代码：

@media screen and (max-width: 600px){
c-player .controls .c-center {
    display: flex !important;
}}

这样宽度低于600px的屏幕也能显示进度条了，如果你想自定义宽度不显示进度条，比如宽度低于360px不显示进度条，在上面的css代码下追加：

@media screen and (max-width: 360px){
c-player .controls .c-center {
    display: none !important;
}}

这样宽度低于360px的屏幕将不会显示进度条。

最后更新于 2021-04-12 04:47:43 并被添加「」标签，已有 4660 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

发表新评论