@wiidede/dan-player

Dan Player

Dan Player 是一个基于 Vue 开发的弹幕播放器组件，支持MKV格式，支持ASS、SRT字幕 Dan Player is a bullet screen player component developed based on Vue, supporting MKV format, and supporting ASS, SRT subtitles.

Features

• 基础功能：播放、控制

• 弹幕功能（基于Comment Core Library）

• 键盘快捷键

• 国际化，支持中文、英文已经自定义

• 支持 MKV 格式，读取srt、ass字幕 by @wiidede/ebml

• ass字幕显示 by ASS.js

• Basic functions: play, control

• Danmaku feature (based on Comment Core Library)

• Keyboard shortcuts

• Internationalization, supports Chinese, English and customization

• Supports MKV format, reads srt, ass subtitles by @wiidede/ebml

• ass subtitle display by ASS.js

Demo

Online Demo 在线演示

Quick Start

1. Installation

pnpm add @wiidede/dan-player

2. Usage in Vue

In Single-File Components (SFC)

<script setup lang="ts">
import DanPlayer from '@wiidede/dan-player'
import { ref } from 'vue'
import '@wiidede/dan-player/dist/index.css' // Import the component's stylesheet

const comments = ref([
  // Fill in your actual comment data here, following the format of ICommentCCL type
])
const additionalFunctions = ref(['loop', 'picture-in-picture'])
const locale = ref('en')
</script>

<template>
  <DanPlayer
    :comments="comments"
    autoplay-on-comment-load
    :additional-functions="additionalFunctions"
    :locale="locale"
  />
</template>

Install Globally

import DanPlayer from '@wiidede/dan-player'
// main.ts
import { createApp } from 'vue'
import '@wiidede/dan-player/dist/index.css'

const app = createApp(App)
app.component('DanPlayer', DanPlayer)
app.mount('#app')

declare module 'vue' {
  export interface GlobalComponents {
    DanPlayer: typeof import('dan-player')['default']
  }
}

unplugin-vue-components

import { DanPlayerResolver } from '@wiidede/dan-player/resolver'

// and then add `DanPlayerResolver()` into resolvers

Props

| Name | Type | Description | Default | | ---------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ------ | | comments | ICommentCCL[] (assuming this is the correct type for comment data) | An array containing the comment data to be displayed as CCL. | undefined | | autoplayOnCommentLoad | boolean | A boolean flag indicating whether the video should automatically start playing once the comments are loaded. | false | | additionalFunctions | ('loop' | 'picture-in-picture')[] | An array specifying additional functions to enable for the player, such as loop playback and Picture-in-Picture mode. | [] | | locale | I18nLocale | I18nMessages (based on your actual i18n type definitions) | The language setting for internationalization. It determines which language's text content will be displayed in the component. | 'en' | | (other relevant props) | (describe the types and purposes of other props if there are more in the component) | (provide detailed descriptions for each additional prop) | (default values) |

Events

Name	Description
onCommentLoad	This event is emitted when the comment data has been successfully loaded. Parent components can listen to this event to perform additional operations upon comment data availability.

Exposed Properties and Methods

The component exposes several properties and methods via defineExpose for external components to interact with and control the video player more precisely:

Name	Type	Description
playing	boolean	Indicates whether the video is currently playing or paused.
currentTime	number	Represents the current playback time of the video in seconds.
duration	number	Holds the total duration of the video in seconds.
(other relevant properties)	(types)	(describe the types and purposes of other exposed properties like volume, muted, isPictureInPicture, etc., if applicable)
togglePlay	Function	A method that can be called to toggle the play/pause state of the video.
(other relevant methods)	(Function)	(describe the functionality of other exposed methods such as togglePictureInPicture, toggleFullscreen, etc., if there are more)

Styling Customization

与修改element-plus主题保持一致，不过只能修改颜色

License

MIT License © 2023-PRESENT wiidede