写在开头

  有些博客主题自带音频视频播放器，但是有些博客主题并没有内容播放器，需要借助插件实现音频视频播放效果。

部署插件

音频播放器 hexo-tag-aplayer

介绍

  Hexo APlayer 是一个基于 APlayer（一个纯 HTML5 音乐播放器）的 Hexo 插件，可以在 Hexo 博客中嵌入简洁且美观的音乐播放器。它支持自定义音乐列表、音频播放、暂停、音量调节等功能，适用于博客内容中的背景音乐或音频分享。

  GitHub链接 –> 链接直达

安装

  安装 hexo-tag-aplayer 插件十分简单，只需要在博客目录执行

npm install hexo-tag-aplayer -s

配置

  修改 Hexo 的配置文件 _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 相同

使用

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

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

注意

lrc歌词部分要在链接前加上lrc:否则渲染时候会报错。

演示

视频播放器 hexo-tag-dplayer

简介

  hexo-tag-dplayer 是一个 Hexo 插件，用于在博客中嵌入 DPlayer（一个基于 HTML5 的视频播放器）。DPlayer 支持多种视频格式、弹幕、全屏等功能，适合用于博客中的视频展示。

  GitHub项目 –> 链接直达

安装

npm install hexo-tag-dplayer -s

配置

  修改 Hexo 的配置文件 _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
    # 后面还可以接着写其他默认配置

使用

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

{% 
    dplayer     
    "url=https://dl.sm9.top/Video/2018/KeyCastOW.mp4" 
%}