@wiidede/dan-player NPM

Dan Player(WIP)

Dan Player 是一个基于 Vue 开发的弹幕播放器组件

Features

基础功能：播放、控制
弹幕功能（基于Comment Core Library）
键盘快捷键
国际化，支持中文、英文已经自定义

Demo

Quick Start

1. Installation

First, make sure your Vue project has the necessary dependencies installed. Then, add Dan Player to your project using your preferred package manager.

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/style.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/style.css'

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

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

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

@vueuse/core @vueuse/math @wiidede/comment-core-library element-plus

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago