Hexo视频与音频播放器插件使用记录

这段时间巨闲,因为疫情的缘故不能出门,所有有大量时间;

我现在的博客是Wordpress的越来越感觉臃肿加载慢,所以趁着现在时间充足开始将博客切换到Hexo;

Hxeo之前没用过完全不熟悉,所以得慢慢熟悉,博客搬家的过程中有些视频不知道怎么插入Hexo中;

所以这篇帖子专门来记录如何在Hexo里面插入视频播放器与音频播放器的内容;

Aplayer音频插件使用

1、介绍

Aplayer这个插件是专门用来播放音频的

2、安装命令

npm install hexo-tag-aplayer -s

3、修改_config.yml配置文件

增加以下内容

基本配置

aplayer:
  cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
  meting: true       # MetingJS 支持
  meting_cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js # 引用 Meting.js 外部 CDN 地址 (默认不开启)

高级配置

aplayer:
  script_dir: some/place                        # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: some/place                         # Public 目录下样式目录路径，默认: 'assets/css'
  cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同

4、aplayer使用方法

使用 hexo-tag-aplayer 非常简单，只需要在 MarkDown 文件中插入正确的标记就可以了。

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

如果你开启了文章资源文件夹功能的话，就可以这样加载歌曲了

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

Dplayer视频插件使用

1、安装命令

npm install hexo-tag-dplayer -s

2、修改_config.yml配置文件

hexo-tag-dplayer:
  cdn:
    - https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
    - https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
  default: 
    api: https://api.prprpr.me/dplayer/
    loop: yes
    screenshot: yes
    # 后面还可以接着写其他默认配置

3、Dplayer使用方法

使用 hexo-tag-dplayer 非常简单，只需要在 MarkDown 文件中插入正确的标记就可以了。

{% 
    dplayer     "url=http://www.5yun.org/video/9380.mp4" 
    "loop=yes"  "theme=#FADFA3"     "autoplay=false"  "lang=zh-cn"  "preload=auto"
%}

更多高级参数和介绍看下面原文介绍

本文内容转载于：https://easyhexo.com/3-Plugins-use-and-config/3-2-hexo-tag-dplayer/