草莓播放器 · DPlayer：轻量美观带弹幕

本篇介绍草莓播放器中的 DPlayer 方案。它是国内知名的轻量美观播放器，配置极简、界面优雅。

原出处

DPlayer 由 DIYgod 开发的开源 HTML5 播放器，以简洁的 UI 和可插拔弹幕著称。本项目在其 DPlayer 官方仓库基础上，将 dplayer.min.js、hls.min.js、flv.min.js 本地化到 dp/ 目录，并进行瘦身式改造。

项目：DPlayer https://github.com/diygod/DPlayer
作者：DIYgod（https://diygod.cc）

修改说明

参数入口：读取 ?url=，缺失时用纯色标题提示。
格式识别：按扩展名判断 m3u8 → type: hls、flv → type: flv，其余 type: auto 交由 DPlayer 自身处理。
简洁配置：autoplay、静音自动播、主题色 #b7daff（淡蓝），并开启 screenshot 截图按钮。
轻量依赖：仅引入所需的 Hls / Flv SDK，无冗余插件。

实现效果

轻量美观的默认皮肤、自动聚焦的播放按钮
支持 HLS（m3u8）、FLV、MP4
截图功能、全屏、倍速（默认面板）
可扩展弹幕（本项目未开启，如需可自行接入）

演示说明

🎬 在线演示（下方为该播放器内嵌实时播放，可点击右下角全屏）：

https://play.123366.xyz/dp/?url=视频地址

DPlayer 对 HLS/FLV 都支持良好，是综合性价比很高的选择。

部署教程

本章节为 DPlayer 官网的原版使用方法，适用于所有标准安装场景。官方文档与源码见：

官网 / 文档：https://dplayer.js.org/
GitHub：https://github.com/diygod/DPlayer

安装

你可以通过 npm 或 CDN 引入 DPlayer。

npm 安装（推荐用于打包器项目）：

1
npm i dplayer

CDN 引入（推荐用于纯静态页面）：

1
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>

基础使用

先准备一个播放器容器，再初始化 DPlayer。

1
<div id="dplayer"></div>

1
2
3
4
5
6
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mp4'
    }
});

所有参数的完整说明请查阅官方文档 https://dplayer.js.org/#/zh-Hans/guide。

传参播放的最小示例

结合 ?url=视频地址 传参，可在博客、iframe 或任意页面中快速唤起播放：

1
<div id="dplayer"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>
<script>
var url = new URLSearchParams(location.search).get('url') || 'demo.mp4';
var dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: url
    }
});
</script>

HLS 与 FLV

DPlayer 原生支持 HLS、FLV、DASH 等格式，对应 video.type 可设为 auto、hls、flv、dash 等。其中 HLS（m3u8）与 FLV 需要额外引入对应的 SDK：

HLS（依赖 hls.js）：

1
2
3
<!-- 在 DPlayer.min.js 之前引入 hls.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>

1
2
3
4
5
6
7
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://example.com/video.m3u8',
        type: 'hls'
    }
});

FLV（依赖 flv.js）：

1
2
3
4
5
6
7
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://example.com/video.flv',
        type: 'flv'
    }
});

不指定 type 时，DPlayer 默认使用 auto 自动识别格式（MP4 等可直接播放）。

下载文件、部署到自己网站

上面的 CDN 用于快速体验；若要把 DPlayer 下载文件并在自己的网站部署：

需要下载哪些文件：播放 MP4 只需核心 DPlayer.min.js 一个文件（来自官方 DPlayer npm 包 dist/DPlayer.min.js）。CDN 镜像亦可直接获取：
- jsDelivr：https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js
放到网站目录：在站点根目录新建 dp/ 文件夹，把 DPlayer.min.js 放进去。

本地引用：

1
2
3
4
5
6
7
8
<script src="./dp/DPlayer.min.js"></script>
<div id="player"></div>
<script>
new DPlayer({
  container: document.getElementById('player'),
  video: { url: new URLSearchParams(location.search).get('url') },
});
</script>

用 ?url= 播放：整站上传到任意静态托管（Nginx、EdgeOne Pages、GitHub Pages 等），无需后端：
```
https://你的域名/dp/?url=视频地址
```

只播 MP4 无需额外依赖；需要 HLS（m3u8）/ FLV 时，才额外下载 hls.min.js、flv.min.js 并在初始化前引入（见上文「HLS 与 FLV」）。