帮助文档

https://dplayer.diygod.dev/zh/guide.html#special-thanks

安装

pnpm install dplayer --save
pnpm install @types/dplayer --save-dev

使用方法

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import DPlayer from 'dplayer';
import type {
  DPlayerOptions,
  DPlayerVideoOptions,
  DPlayerDanmakuOptions,
  DPlayerSubtitleOptions
} from '@/interfaces/DPlayerOptions.ts';

const prop = defineProps<{
  url: string;
  pic?: string;
  subtitle?: string;
  autoplay: boolean;
  danmakuId?: string;
  danmakuApi?: string;
}>()

/**
 * 视频配置属性
 */
const videoOptions: DPlayerVideoOptions = {
  url: prop.url,
  pic: prop.pic ? prop.pic : undefined,
  thumbnails: prop.pic ? prop.pic : undefined,
};

/**
 * 弹幕配置属性
 */
const danmakuOptions: DPlayerDanmakuOptions = {
  id: prop.danmakuId ? prop.danmakuId : 'no danmaku',
  api: prop.danmakuApi ? prop.danmakuApi : 'no danmaku'
}

/**
 * 字幕配置属性
 */
const subtitleOptions: DPlayerSubtitleOptions = {
  url: prop.subtitle ? prop.subtitle : 'no subtitle',
  type: 'webvtt',
  bottom:'20%',
  fontSize: '32px',
}

/** 
 * DPlayer 配置属性
 */
const playerOptions: DPlayerOptions = {
  container: null,
  autoplay: prop.autoplay,
  video: videoOptions,
  danmaku: prop.danmakuId ? danmakuOptions : undefined,
  subtitle: prop.subtitle ? subtitleOptions : undefined
};

const dplayerContainer = ref(null);                     // 引用视频播放器的容器元素
const dplayerInstance = ref<DPlayer | null>(null);      // DPlayer 实例

onMounted(() => {
  if (dplayerContainer.value) {                         // 检查 dplayerContainer 是否已绑定到实际的 DOM 元素上
    playerOptions.container = dplayerContainer.value;   // 将容器元素绑定到 DPlayer 配置中
    dplayerInstance.value = new DPlayer(playerOptions); // 创建 DPlayer 实例
  }
});

onBeforeUnmount(() => {
  // 在组件销毁前销毁 DPlayer 实例，避免内存泄漏
  if (dplayerInstance.value) {
    dplayerInstance.value.destroy();                    // 销毁 DPlayer 实例
  }
});
</script>

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

<style scoped lang="scss">
.dplayer-container {
  width: 100%;
  height: 500px;
  /* Adjust based on your needs */
}
</style>

属性配置

import type { SubTitleType } from "dplayer";

/**
 * 视频属性 
 * */ 
export interface DPlayerVideoOptions {
  url: string;          // 视频文件的地址
  pic?: string;         // 视频封面图片地址（可选）
  thumbnails?: string;  // 视频缩略图地址（可选）
}

/**
 * 弹幕自定义 API 后端接口
 */
export interface DanmakuAPIBackend {
  read: (endpoint: { url: string }, callback: (data: any) => void) => void;
  send: (
    endpoint: { url: string },
    danmakuData: any,
    callback: () => void
  ) => void;
}

/**
 * 弹幕属性
 */
export interface DPlayerDanmakuOptions {
  id: string;                     // 弹幕池 ID
  api: string;                    // 弹幕数据的接口 URL
  token?: string;                 // 用于验证请求的令牌（可选）
  maximum?: string;               // 最大同时显示的弹幕数量（可选）
  unlimited?: boolean;            // 是否不限数量地显示弹幕（可选）
  addition?: string[];            // 额外的弹幕池 URL 数组（可选）
  user?: string;                  // 当前用户的标志（可选）
  bottom?: string;                // 弹幕在视频底部的距离（可选）
  fontSize?: string;              // 弹幕字体大小（可选）
  speed?: number;                 // 弹幕滚动速度（可选）
  opacity?: number;               // 弹幕透明度，0 到 1 之间（可选）
  callback?: () => void;          // 弹幕加载成功后的回调函数（可选）
  apiBackend?: DanmakuAPIBackend; // 自定义 API 后端方式（可选）
}

/**
 * 字幕属性
 */
export interface DPlayerSubtitleOptions {
  url: string;              // 字幕文件的 URL
  type?: SubTitleType;      // 字幕文件的类型，默认 'webvtt'
  fontSize?: string;        // 字幕字体大小，默认 '16px'
  bottom?: string;          // 字幕距视频底部的距离，默认 '10%'
  color?: string;           // 字幕颜色，默认 'white'
  backgroundColor?: string; // 字幕背景颜色，默认 'transparent'
  offset?: number;          // 字幕的时间偏移，单位：秒，默认 0
}

/**
 * DPlayer 播放器
 */
export interface DPlayerOptions {
  container: HTMLElement | null;      // 播放器容器
  autoplay?: boolean;                 // 是否自动播放（可选）
  video: DPlayerVideoOptions;         // 视频属性
  danmaku?: DPlayerDanmakuOptions;    // 弹幕属性（可选）
  subtitle?: DPlayerSubtitleOptions;  // 字幕属性（可选）
}

更多内容请访问：个人博客传送门