hexo添加dplay在线视频播放器，支持弹幕、截图、字幕、倍速播放。

Github项目

插件的使用

npm 安装

npm install hexo-tag-dplayer --save

使用方法

编辑 Markdown 时，使用格式

{% dplayer key=value ... %}
  • 一个最简单的列子：
    {% dplayer "url=https://xxx.com/xxx.mp4" "pic=https://xxx.com/xxx.jpg" "loop=yes" "autoplay=false" "mutex=true" %}
    url 视频地址
    pic 视频封面
    loop 视频循环播放
    autoplay 视频自动播放
    mutex 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
  • 再来一个
    {% dplayer "url=https://xxx.com/xxx.mp4" "pic=https://xxx.com/xxx.jpg" "loop=yes" "autoplay=false" "mutex=true" "logo=logo.png" "screenshot=true" "volume=0.7"  %}
    logo 左上角添加logo
    screenshot 开启截图
    volume 默认音量

关键 key 可以是

dplayer 选项:
    'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' :
        布尔选项，使用"yes" "y" "true" "1" "on"或者留空
    'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' :
        字符串参数
    'volume', 'maximum' :
        数字参数
容器 选项:
    'width', 'height' :
        字符串，用于容器元素样式
其他:
    'code':这个键的值将被附加到script标签中

参数列表

DPlayer 有丰富的参数可以自定义你的播放器实例

名称 默认值 描述
autoplay false 视频自动播放
loop false 视频循环播放
screenshot false 开启截图，如果开启，视频和视频封面需要允许跨域
hotkey true 开启热键，支持快进、快退、音量控制、播放暂停
mutex true 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
dunlimited false 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
preload ‘auto’ 视频预加载，可选值: ‘none’, ‘metadata’, ‘auto’
theme ‘#b7daff’ 主题色
lang navigator.language.toLowerCase() 可选值: ‘en’, ‘zh-cn’, ‘zh-tw’
logo - 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
url - 视频链接
pic - 视频封面
thumbnails - 视频缩略图，可以使用 DPlayer-thumbnails 生成
type ‘auto’ 可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 见#MSE 支持
suburl required 字幕链接
subbottom ‘40px’ 字幕距离播放器底部的距离，取值形如: ‘10px’ ‘10%’
subcolor ‘#fff’ 字幕颜色
id required 弹幕池 id，必须唯一
api required 见#弹幕接口
token - 弹幕后端验证 token
addition - 额外外挂弹幕，见#bilibili 弹幕
dmuser ‘DIYgod’ 弹幕用户名
volume 0.7 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
maximum - 弹幕最大数量

以上就是支持的列表

以下列表可以直接使用 HTML标签 实现

简单例子：

<link rel="stylesheet" href="DPlayer.min.css" />
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>  <!--加载播放器文件-->
<script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://xxx.com/xxx.mp4',
    },
});
</script>

完整的事例：

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto',
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff',
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],
});
名称 默认值 描述
live false 开启直播模式, 见#直播
apiBackend - 自定义获取和发送弹幕行为，见#直播
video.quality - 见#清晰度切换
video.defaultQuality - 见#清晰度切换
video.customType - 自定义类型, 见#MSE 支持
subtitle.type ‘webvtt’ 字幕类型，可选值: ‘webvtt’, ‘ass’，目前只支持 webvtt
subtitle.fontSize ‘20px’ 字幕字号
danmaku.bottom - 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: ‘10px’ ‘10%’
danmaku.unlimited false 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
contextmenu [] 自定义右键菜单
highlight [] 自定义进度条提示点

测试

以下视频存放于 Google drive 无限网盘，通过cloudflare加速。
如果你感兴趣，觉得还不错的话，欢迎访问google drive无限网盘 查看怎么部署。

加载视频慢，请耐心等待一下，加载出来以后是很快的。

博物馆奇妙夜1 (1.94GB)

博物馆奇妙夜2 (1.87GB)

博物馆奇妙夜3 (1.31GB)