v3d-player

Html5 Video Player: vue3 + typescript + dplayer-lite

Dplayer Docs

Supports

- Streaming formats
- HLS
- FLV
- MP4

- Media formats
- AVC(H.264)
- HEVC(H.265)
- AAC
- MP3

Installation

`` bash
npm i v3d-player
`

or

` bash
npm i v3d-player mpegts.js hls.js
`

Usage

This is a vue 3.x component that can only be used in vue 3.x

$3

Install v3d-player via npm and import the plugin as you would any other module.
You will also need to import the stylesheet in some way.

` js




`

Methods

$3

pause video

$3

play video

$3

close video

$3

seek to specified time

$3

video capture. format: .png

$3

set video speed

$3

toggle between play and pause

$3

get video volume

` js
let value = playerRef.value?.volume()
`

set video volume

` js
playerRef.value?.volume(0.5, true)
`

Events

$3

` js
@canplay="handleCanPlay"
@loadstart="handleLoadStart"
/>

const handleCanPlay = () => {
// console.log('canplay')
}

const handleLoadStart = () => {
// console.log('loadstart')
}
`

$3

- Video events

- abort
- canplay
- canplaythrough
- durationchange
- emptied
- ended
- error
- loadeddata
- loadedmetadata
- loadstart
- mozaudioavailable
- pause
- play
- playing
- progress
- ratechange
- seeked
- seeking
- stalled
- suspend
- timeupdate
- volumechange
- waiting

- Player events

- screenshot
- contextmenu_show
- contextmenu_hide
- notice_show
- notice_hide
- quality_start
- quality_end
- destroy
- resize
- fullscreen
- fullscreen_cancel
- webfullscreen
- webfullscreen_cancel

- 事件流触发的顺序：

1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough




Project

setup

` bash
npm i
`

dev

` bash
npm run dev
`

build

` bash
npm run build
``