DPlayer + vue3 使用

帮助文档

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

安装

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

使用方法

属性配置

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;  // 字幕属性（可选）
}

---

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