Hexo 博客嵌入弹幕视频：hexo-tag-dplayer 插件全指南

如果你想给 Hexo 博客的文章添加一个支持弹幕、截图、快捷键的高颜值视频播放器，那么 hexo-tag-dplayer 插件绝对值得一试。这款插件将开源播放器 DPlayer 无缝集成到 Hexo 中，让你轻松实现类似 B 站的视频互动体验。今天就来详细聊聊它的安装、使用和进阶技巧。

关于 hexo-tag-dplayer

hexo-tag-dplayer 是一款将 DPlayer 播放器集成到 Hexo 的插件，由开发者基于 DIYgod 的 DPlayer 移植而来，借鉴了 hexo-tag-aplayer 的实现思路。用官方的话说：“本项目是将 DIYgod 的 DPlayer 运行在 Hexo 的插件”。

有趣的是，官方文档里还自嘲：“这个项目的两个维护者一个只会卖萌，一个又沉迷屁股（这是豆子），所以有什么 bug 很长时间没解决的，请谅解”。如果遇到问题，也欢迎提交 PR 参与修复哦~

安装插件

在 Hexo 博客根目录下，通过 npm 即可快速安装：

npm install hexo-tag-dplayer --save

安装完成后无需额外配置，直接在文章中使用标签即可调用播放器。

基本用法：通过标签嵌入播放器

在 Markdown 文章中，使用 {% dplayer %} 标签即可嵌入播放器，语法格式为：

{% dplayer key=value ... %}

其中 key 对应 DPlayer 的配置参数，支持多种类型的参数（布尔值、字符串、数字等）。下面是常用参数的详细说明：

1. 基础播放参数

参数	类型	说明	示例
autoplay	布尔值	是否自动播放（启用值：yes/y/true/1，或直接写参数名）	autoplay=yes 或 autoplay
loop	布尔值	是否循环播放	loop=true
screenshot	布尔值	是否允许截图（需视频支持）	screenshot=1
hotkey	布尔值	是否启用快捷键（空格暂停、方向键快进等）	hotkey=y
url	字符串	视频资源地址（本地/网络 URL）	url=https://example.com/video.mp4
pic	字符串	视频封面图片地址	pic=./cover.jpg
volume	数字	初始音量（0-1 之间）	volume=0.5（50% 音量）
theme	字符串	播放器主题色	theme=#FADFA3
width/height	字符串	播放器尺寸（CSS 格式）	width=100% height=400px

2. 弹幕功能参数

DPlayer 最具特色的就是弹幕功能，配置以下参数即可启用：

参数	说明
id	视频唯一标识（用于区分不同视频的弹幕）
api	弹幕接口地址（如官方示例 https://api.prprpr.me/dplayer/）
token	弹幕接口验证令牌（可选）
dmuser	发送弹幕时的默认用户名
addition	额外弹幕数据源（JSON 地址）

3. 字幕功能参数

如果需要为视频添加字幕，可配置这些参数：

参数	说明
suburl	字幕文件地址（支持 .vtt 格式）
subtype	字幕类型（默认 webvtt）
subcolor	字幕颜色
subbottom	字幕距离底部的距离（如 20px）

实用示例

示例 1：基础视频播放（带封面和自动播放）

{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "autoplay" "theme=#FADFA3" "width=100%" %}

这段代码会生成一个自适应宽度、自动播放、主题色为浅橙色的播放器，并显示指定封面。

示例 2：带弹幕的循环播放视频

{% dplayer "url=./videos/my-video.mp4" "loop=yes" "screenshot=yes" "id=my-video-id" "api=https://api.prprpr.me/dplayer/" "dmuser=访客" "hotkey=yes" %}

这里启用了循环播放、截图功能和快捷键，同时通过 id 和 api 配置了弹幕接口，用户可以发送和查看弹幕。

示例 3：带字幕的视频

{% dplayer "url=https://example.com/movie.mp4" "suburl=https://example.com/subtitles.vtt" "subcolor=#ffffff" "subbottom=15px" "volume=0.3" %}

该示例为视频添加了白色字幕，字幕位置距离底部 15px，初始音量 30%。

自定义配置

如果需要全局修改播放器的默认参数（如默认主题色、脚本路径等），可以在 Hexo 根目录的 _config.yml 中添加配置：

hexo-tag-dplayer:
  js_path: /assets/js/dplayer/ # DPlayer 脚本文件路径（默认自动加载）
  css_path: /assets/css/dplayer/ # 样式文件路径
  default: # 所有播放器的默认参数
    theme: "#4285F4" # 默认主题色（谷歌蓝）
    volume: 0.2 # 默认音量 20%
    api: https://api.prprpr.me/dplayer/ # 默认弹幕接口

配置后，所有 {% dplayer %} 标签都会继承这些默认参数，无需重复设置。

解决常见问题

1. 支持 PJAX 页面切换

如果你的博客使用 PJAX 实现无刷新跳转，需要在 PJAX 事件中销毁播放器，避免重复加载导致的冲突：

$(document).on("pjax:start", function () {
  if (window.dplayers) {
    for (let i = 0; i < window.dplayers.length; i++) {
      window.dplayers[i].destroy();
    }
    window.dplayers = [];
  }
});

2. 插件 Bug 临时解决方案

如果遇到插件未修复的 Bug，可以直接使用 Hexo 的 标签嵌入 DPlayer 原生代码：

{% raw %}

<div id="dplayer" class="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>
<script>
var dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.png'
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/'
    }
});
</script>
{% endraw %}

这种方式绕过插件直接调用 DPlayer，适合临时解决兼容性问题。

写在最后

hexo-tag-dplayer 插件让 Hexo 博客的视频展示变得简单而强大，无论是分享教程、音乐 MV 还是个人作品，都能通过弹幕和互动功能提升读者参与感。虽然官方自嘲维护精力有限，但插件的核心功能已经相当稳定，对于大多数博客场景来说足够实用。

如果你的博客需要嵌入视频，不妨试试这款插件，让文章内容更加生动~ 也欢迎参与项目贡献，一起完善这个工具！

参考资料：hexo-tag-dplayer 官方文档、DPlayer 官方仓库