目录

Hugo 篇三:添加 DPlayer 播放器

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