Hugo 篇三：添加 DPlayer 播放器

Jay 收录于 Hugo

2020-04-14 约 1664 字预计阅读 4 分钟次阅读

DPlayer 是一款支持弹幕的 HTML5 视频播放器，支持 HLS、FLV、MPEG DASH、WebTorrent 和其他自定义流媒体，支持弹幕、截图、热键、清晰度切换、预览图、字幕等多种功能。

前言

说起来 LoveIt 这款主题的音乐播放器用的是 APlayer 和 MetingJS，所以我在想何不引入 APlayer 作者的另一个项目 DPlayer 视频播放器来替换掉 HTML5 简陋的默认播放器呢？

说明

基于 DPlayer 1.25.0，HLS 0.13.2，flv.js 1.5.0 实现

引入 css 和 js

新建 LoveIt/assets/lib/dplayer 文件夹，将下面的 css 和 js 文件下载保存在此位置：

1
2
3
4


https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/flv.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/DPlayer.min.css
https://cdn.jsdelivr.net/npm/[email protected]/dist/DPlayer.min.js

修改 LoveIt/layouts/partials/assets.html，加入以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


{{- /* Video */ -}}
{{- if ne .Site.Params.DPlayer false -}}
    {{- if $scratch.Get "video" -}}
        {{- /* DPlayer */ -}}
        {{- with $CDN.dplayerCSS -}}
            {{- slice . | $scratch.Add "linkCDN" -}}
        {{- else -}}
            {{- slice "lib/dplayer/DPlayer.min.css" | $scratch.Add "linkLocal" -}}
        {{- end -}}
        {{- with $CDN.hlsJS -}}
        {{- slice . | $scratch.Add "scriptCDN" -}}
        {{- else -}}
            {{- slice "lib/dplayer/hls.min.js" | $scratch.Add "scriptLocal" -}}
        {{- end -}}
        {{- with $CDN.flvJS -}}
        {{- slice . | $scratch.Add "scriptCDN" -}}
        {{- else -}}
            {{- slice "lib/dplayer/flv.min.js" | $scratch.Add "scriptLocal" -}}
        {{- end -}}
        {{- with $CDN.dplayerJS -}}
            {{- slice . | $scratch.Add "scriptCDN" -}}
        {{- else -}}
            {{- slice "lib/dplayer/DPlayer.min.js" | $scratch.Add "scriptLocal" -}}
        {{- end -}}
    {{- end -}}
{{- end -}}

如果需要设置 CDN，在 config.toml 里设置，同时设置启用 DPlayer：

1
2
3
4
5
6
7
8
9


[params]
  DPlayer = true
# CSS 和 JS 文件的 CDN 设置
[params.cdn]
  # [email protected] [email protected] [email protected] https://github.com/video-dev/hls.js https://github.com/bilibili/flv.js https://github.com/MoePlayer/DPlayer
  hlsJS = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js"></script>'
  flvJS = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flv.min.js"></script>'
  dplayerCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/DPlayer.min.css">'
  dplayerJS = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/DPlayer.min.js"></script>'

注意

务必保证 hls 和 flv.js 在 DPlayer 之前引入

定义 shortcode

在 LoveIt/layouts/shortcodes/ 下新建 video.html 文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


{{- $scratch := .Page.Scratch.Get "scratch" -}}

{{- if .IsNamedParams -}}
    {{- if .Get "url" -}}
    <div id="{{ .Get `id` }}"></div>
    <script>
      function loadDPlayer(){
        let dp = new DPlayer({
          container: document.getElementById({{ .Get `id` }}),
          autoplay: {{ .Get `autoplay` | default false }},
          theme: {{ .Get `theme` | default `#b7daff` }},
          loop: {{ .Get `loop` | default false }},
          lang: {{ .Get `lang` | default `zh-cn` }},
          screenshot: {{ .Get `screenshot` | default true }},
          hotkey: {{ .Get `hotkey` | default true }},
          preload: {{ .Get `preload` | default `auto` }},
          logo: {{ .Get `logo` }},
          volume: {{ .Get `volume` | default 0.7 }},
          mutex: {{ .Get `mutex` | default true }},
          video: {
              url: {{ .Get `url` }},
              pic: {{ .Get `pic` }},
              thumbnails: {{ .Get `thumbnails` }},
              type: {{ .Get `type` | default `auto` }},
          },
          subtitle: {
              url: {{ .Get `sub` }},
              type: {{ .Get `subtype` | default `webvtt` }},
              fontSize: {{ .Get `fontsize` | default `20px` }},
              bottom: {{ .Get `bottom` | default `10%` }},
              color: {{ .Get `color` | default `#b7daff` }},
          },
        });
      }
      document.addEventListener('DOMContentLoaded', loadDPlayer, !1);
    </script>
    {{- end -}}
{{- end -}}
{{- $scratch.Set "video" true -}}

代码删除了 DPlayer 预设的自定义右键菜单、进度条提示点和弹幕参数。目前没有找到好用的弹幕接口，自建的话，静态博客会公开接口 API，免费的服务额度有限，付费的估计承受不起。

在 LoveIt/assets/css/_partial/_single/ 下新建 _video.scss 样式：

1
2
3
4
5
6
7


.dplayer {
  position: relative;
  width: 100%;
  height: auto;
  margin: 3% auto;
  text-align: center;
}

在 LoveIt/assets/css/_page/_single.scss 以下位置引入新建的 _video.scss：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


@import "../_partial/_single/code";
@import "../_partial/_single/instagram";
@import "../_partial/_single/admonition";
@import "../_partial/_single/echarts";
@import "../_partial/_single/mapbox";
@import "../_partial/_single/music";
@import "../_partial/_single/bilibili";
@import "../_partial/_single/bilibilibv";
@import "../_partial/_single/qqvideo";
@import "../_partial/_single/iqiyi";
@import "../_partial/_single/youku";
@import "../_partial/_single/sohu";
@import "../_partial/_single/acfun";
@import "../_partial/_single/video";

使用方法

参数名	默认值	描述
id	必须	播放器父元素唯一 id，用于处理同页面多个播放器，同页面不可重复
url	必须	视频直链地址
pic	可选	视频封面图片
thumbnails	可选	视频缩略图，可以使用 DPlayer-thumbnails 生成
type	可选，“auto”	流媒体类型，可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 见#MSE 支持
autoplay	可选，false	视频自动播放
theme	可选，"#b7daff”	主题色
loop	可选，false	视频循环播放
lang	可选，“zh-cn”	播放器显示语言，可选值: ‘en’, ‘zh-cn’, ‘zh-tw’
screenshot	可选	开启截图，如果开启，视频和视频封面需要允许跨域
hotkey	可选，true	开启热键，支持快进、快退、音量控制、播放暂停
preload	可选，“auto”	视频预加载，可选值: ‘none’, ‘metadata’, ‘auto’
logo	可选	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
volume	可选，0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
mutex	可选，true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
sub	可选	字幕链接
subtype	可选，“webvtt”	字幕类型，可选值: ‘webvtt’, ‘ass’，目前只支持 webvtt
fontsize	可选，“20px”	字幕字号
bottom	可选，“10%”	字幕距离播放器底部的距离，取值形如: ‘10px’ ‘10%’
color	可选，"#b7daff”	字幕颜色

使用方法：

1

{{< video id="a" url="/videos/Wakin.Chau.Any.song.reminds.you.or.me.mp4" sub="/videos/Wakin.Chau.Any.song.reminds.you.or.me.vtt" >}}

实际页面显示效果：

后记

整个代码还是简单粗糙地引入，尤其是对同页面多个播放器的处理，新手不会优化，就这样能用就行了。

参考内容：

DPlayer 官方文档

DPlayer-Typecho

目录

Hugo 篇三：添加 DPlayer 播放器

前言

引入 css 和 js

定义 shortcode

使用方法

后记