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

1npm i v3d-player

or

1npm i v3d-player mpegts.js hls.js

Usage

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

ES Modules

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.

1<template>
2  <div class="demo-player">
3    <v3d-player
4      ref="playerRef"
5      :options="options"
6    />
7  </div>
8</template>
9
10<script lang="ts" setup>
11import { reactive } from 'vue'
12import V3dPlayer from 'v3d-player'
13import 'v3d-player/dist/style.css'
14
15const options = reactive({
16  autoplay: true,
17  muted: true,
18  screenshot: true,
19  preventClickToggle: true,
20  theme: '#FF3366',
21  volume: 0.9,
22  src: '//d2zihajmogu5jn.cloudfront.net/bipbop-advanced/gear3/prog_index.m3u8'
23})
24</script>
25
26</script>
27<style>
28.demo-player {
29  margin: 0 auto;
30  margin-top: 50px;
31  width: 640px;
32  height: 480px;
33}
34</style>

Methods

pause()

pause video

play()

play video

close()

close video

seek(time: number)

seek to specified time

snapshot()

video capture. format: .png

speed(rate: number)

set video speed

toggle()

toggle between play and pause

volume(percentage: number, nonotice: boolean)

get video volume

1  let value = playerRef.value?.volume()

set video volume

1  playerRef.value?.volume(0.5, true)

Events

Example

1<v3d-player
2  @canplay="handleCanPlay"
3  @loadstart="handleLoadStart"
4/>
5
6const handleCanPlay = () => {
7  // console.log('canplay')
8}
9
10const handleLoadStart = () => {
11  // console.log('loadstart')
12}

Event List

• 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

1npm i

dev

1npm run dev

build

1npm run build