Hexo Dplayer 插件使用
回到主题。
介绍
hexo-tag-dplayer 是 APlayer 播放器的 Hexo 标签插件,可以十分方便地在文章内插入视频播放器。
安装
安装 hexo-tag-dplayer 插件十分简单,只需要在博客目录执行
1 | npm install hexo-tag-dplayer -s |
配置项需要一些 Yaml 语法的基础知识,可以参见 YAML 语法简介
修改 Hexo 的配置文件 _config.yml
,增加
1 | hexo-tag-dplayer: |
使用
使用 hexo-tag-dplayer 非常简单,只需要在 MarkDown 文件中插入正确的标记就可以了。
::: v-pre
1 | {% dplayer "url=https://dl.sm9.top/Video/2018/KeyCastOW.mp4" %} |
:::
如果还需要其他配置,尽管在上面写就好,详情可以看[这里] (https://github.com/MoePlayer/hexo-tag-dplayer),下面有一个简单的示例可以看一下:
::: v-pre
1 | {% dplayer "url=https://dl.sm9.top/Video/2018/%E6%8E%98%E5%9C%B0%E6%B1%82%E5%8D%87_x264.mp4" " screenshot" "loop=yes" "id=46190A32F63DFF2CF0A3BB0F3293636C" "api=https://api.prprpr.me/dplayer/" "addition=https://api.prprpr.me/dplayer/v3/bilibili?aid=17150441 " %} |
:::
附Dplayer一些简单的参数列表,注意, Dplayer 的参数仅作为参考,具体请以 hexo-tag-dplayer 为准
名称 | 默认值 | 描述 |
---|---|---|
container | document.querySelector(’.dplayer’) | 播放器容器元素 |
live | false | 开启直播模式, 详情 |
autoplay | false | 视频自动播放 |
theme | ‘#b7daff’ | 主题色 |
loop | false | 视频循环播放 |
lang | navigator.language.toLowerCase() | 可选值: ‘en’, ‘zh-cn’, ‘zh-tw’ |
screenshot | false | 开启截图,如果开启,视频和视频封面需要开启跨域 |
hotkey | true | 开启热键 |
preload | ‘auto’ | 预加载,可选值: ‘none’, ‘metadata’, ‘auto’ |
volume | 0.7 | 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 |
logo | - | 在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置 |
apiBackend | - | 自定义获取和发送弹幕行为,详情 |
video | - | 视频信息 |
video.quality | - | 详情 |
video.defaultQuality | - | 详情 |
video.url | - | 视频链接 |
video.pic | - | 视频封面 |
video.thumbnails | - | 视频缩略图,可以使用 DPlayer-thumbnails 生成 |
video.type | ‘auto’ | 可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 详情 |
video.customType | - | 自定义类型, 详情 |
subtitle | - | 外挂字幕 |
subtitle.url | required |
字幕链接 |
subtitle.type | ‘webvtt’ | 字幕类型,可选值: ‘webvtt’, ‘ass’,目前只支持 webvtt |
subtitle.fontSize | ‘20px’ | 字幕字号 |
subtitle.bottom | ‘40px’ | 字幕距离播放器底部的距离,取值形如: ‘10px’ ‘10%’ |
subtitle.color | ‘#fff’ | 字幕颜色 |
danmaku | - | 显示弹幕 |
danmaku.id | required |
弹幕池id,必须唯一 |
danmaku.api | required |
详情 |
danmaku.token | - | 弹幕后端验证 token |
danmaku.maximum | - | 弹幕最大数量 |
danmaku.addition | - | 额外外挂弹幕,详情 |
danmaku.user | ‘DIYgod’ | 弹幕用户名 |
danmaku.bottom | - | 弹幕距离播放器底部的距离,防止遮挡字幕,取值形如: ‘10px’ ‘10%’ |
danmaku.unlimited | false | 海量弹幕模式,即使重叠也展示全部弹幕,请注意播放器会记忆用户设置,用户手动设置后即失效 |
contextmenu | [] | 自定义右键菜单 |
highlight | [] | 自定义进度条提示点 |
mutex | true | 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器 |
使用弹幕
上面的示例中已经写了怎么使用弹幕了,使用弹幕首先需要有一个 ID ,建议使用视频的哈希值作为ID,这样可以尽可能保证 ID 唯一,防止重复,接下来要配置弹幕接口,官方免费的弹幕接口能用,但是不稳定,如果有特殊需求,推荐个人自己搭建弹幕服务器。
解析 BiliBiLi 弹幕,这个上面的示例也已经有了,同样,免费的服务不一定稳定,有特殊需求的请自己搭建弹幕服务器。
增加外部弹幕列表,同解析 BiliBiLi 弹幕一样,只要将外部弹幕的地址写进 addition
就可以了。
使用字幕
增加参数 "subtitle=字幕文件地址"
就可以了,如需修改字幕颜色或者字体大小,仿照其他参数写就可以了。
参考资料
https://easyhexo.com/3-Plugins-use-and-config/3-2-hexo-tag-dplayer/