OL-LearnPlatform-Frontend/docs/DPlayer-Integration-Guide.md

DPlayer 集成指南

什么是 DPlayer？

DPlayer 是由 DIYGod 开发的一个开源的 HTML5 视频播放器，具有以下特点：

• 🎨 界面美观：现代化的设计风格
• 🎯 轻量级：体积小，加载快
• 🌏 中文友好：由中国开发者开发，中文文档完善
• 🎮 功能丰富：支持弹幕、快捷键、倍速播放等
• 📱 移动端适配：响应式设计，支持移动设备

主要功能特性

基础功能

• ✅ 播放/暂停控制
• ✅ 音量控制
• ✅ 进度条拖拽
• ✅ 全屏切换
• ✅ 倍速播放 (0.5x - 2x)

高级功能

• 🎯 键盘快捷键支持
• 🎨 自定义主题色
• 📝 右键菜单自定义
• 🎵 音频可视化
• 📱 移动端手势支持

格式支持

• MP4
• WebM
• Ogg
• HLS (.m3u8)
• FLV
• 更多格式通过插件支持

安装和集成

方法1：CDN 引入（推荐用于快速测试）

<!-- 在 index.html 中引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>

方法2：NPM 安装（推荐用于生产环境）

npm install dplayer

然后在组件中导入：

import DPlayer from 'dplayer'
import 'dplayer/dist/DPlayer.min.css'

基础使用

创建播放器

const player = new DPlayer({
  container: document.getElementById('dplayer'),
  video: {
    url: 'video.mp4',
    type: 'auto'
  },
  autoplay: false,
  theme: '#007bff',
  lang: 'zh-cn'
})

事件监听

player.on('play', () => {
  console.log('视频开始播放')
})

player.on('pause', () => {
  console.log('视频暂停')
})

player.on('ended', () => {
  console.log('视频播放结束')
})

player.on('error', () => {
  console.log('播放出错')
})

配置选项

基础配置

const options = {
  container: document.getElementById('dplayer'), // 容器元素
  video: {
    url: 'video.mp4',        // 视频地址
    type: 'auto',           // 视频类型：auto, normal, hls, flv
    defaultQuality: 0,      // 默认画质
    pic: 'poster.jpg',      // 封面图
    thumbnails: 'thumbnails.jpg' // 缩略图
  },
  autoplay: false,          // 自动播放
  theme: '#007bff',         // 主题色
  lang: 'zh-cn',           // 语言：zh-cn, en
  hotkey: true,            // 启用快捷键
  preload: 'auto',         // 预加载：auto, metadata, none
  volume: 0.8,             // 默认音量
  playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2], // 倍速选项
  contextmenu: [           // 右键菜单
    {
      text: '关于 DPlayer',
      link: 'https://github.com/DIYGod/DPlayer'
    }
  ]
}

高级配置

const advancedOptions = {
  // 弹幕配置
  danmaku: {
    id: 'dplayer-danmaku',
    api: 'https://api.prprpr.me/dplayer/',
    token: 'token',
    maximum: 1000,
    addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'],
    user: 'DIYGod',
    bottom: '15%',
    unlimited: true
  },
  
  // 字幕配置
  subtitle: {
    url: 'subtitle.vtt',
    type: 'webvtt',
    fontSize: '20px',
    bottom: '10%',
    color: '#fff'
  },
  
  // 画质切换
  video: {
    url: [
      {
        name: '1080P',
        url: 'video-1080p.mp4'
      },
      {
        name: '720P', 
        url: 'video-720p.mp4'
      }
    ],
    defaultQuality: 0
  }
}

在 Vue 项目中使用

创建 DPlayer 组件

<template>
  <div class="video-player-wrapper">
    <div ref="dplayerContainer" class="dplayer-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const dplayerContainer = ref()
let player = null

onMounted(() => {
  // 确保 DPlayer 已加载
  if (window.DPlayer) {
    initPlayer()
  } else {
    loadDPlayer().then(() => {
      initPlayer()
    })
  }
})

const loadDPlayer = () => {
  return new Promise((resolve) => {
    const cssLink = document.createElement('link')
    cssLink.rel = 'stylesheet'
    cssLink.href = 'https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.css'
    document.head.appendChild(cssLink)

    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js'
    script.onload = resolve
    document.head.appendChild(script)
  })
}

const initPlayer = () => {
  player = new window.DPlayer({
    container: dplayerContainer.value,
    video: {
      url: '/video/first.mp4',
      type: 'auto'
    },
    autoplay: false,
    theme: '#007bff',
    lang: 'zh-cn',
    hotkey: true
  })
}

onUnmounted(() => {
  if (player) {
    player.destroy()
  }
})
</script>

<style scoped>
.video-player-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.dplayer-container {
  width: 100%;
  aspect-ratio: 16/9;
}
</style>

样式定制

自定义主题色

/* 修改播放器主题色 */
.dplayer {
  --dplayer-theme: #007bff;
}

/* 自定义进度条颜色 */
.dplayer .dplayer-bar-wrap .dplayer-bar .dplayer-played {
  background: #007bff;
}

/* 自定义控制按钮颜色 */
.dplayer .dplayer-icons .dplayer-icon {
  color: #fff;
}

.dplayer .dplayer-icons .dplayer-icon:hover {
  color: #007bff;
}

响应式设计

/* 移动端适配 */
@media (max-width: 768px) {
  .dplayer {
    font-size: 14px;
  }
  
  .dplayer .dplayer-icons .dplayer-icon {
    font-size: 16px;
  }
}

快捷键支持

DPlayer 默认支持以下快捷键：

• 空格键 - 播放/暂停
• ← - 后退 10 秒
• → - 前进 10 秒
• ↑ - 音量 +10%
• ↓ - 音量 -10%
• F - 全屏切换
• M - 静音切换

与 CKPlayer 对比

特性	CKPlayer	DPlayer
界面美观度	⭐⭐	⭐⭐⭐⭐⭐
功能丰富度	⭐⭐⭐	⭐⭐⭐⭐
移动端支持	⭐⭐⭐	⭐⭐⭐⭐
中文支持	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
社区活跃度	⭐⭐	⭐⭐⭐⭐
文档质量	⭐⭐⭐	⭐⭐⭐⭐⭐
学习成本	⭐⭐⭐⭐	⭐⭐⭐

总结

DPlayer 是一个优秀的视频播放器选择，特别适合：

• 🎯 需要美观界面的项目
• 🌏 中文用户群体
• 📱 重视移动端体验
• 🎨 需要自定义主题的项目
• ⚡ 追求轻量级解决方案

相比当前的 CKPlayer，DPlayer 提供了更好的用户体验和更丰富的功能，是升级视频播放器的理想选择。