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

npm i v3d-player

or

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

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.

<template>
  <div class="demo-player">
    <v3d-player
      ref="playerRef"
      :options="options"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import V3dPlayer from 'v3d-player'
import 'v3d-player/dist/style.css'

const options = reactive({
  autoplay: true,
  muted: true,
  screenshot: true,
  preventClickToggle: true,
  theme: '#FF3366',
  volume: 0.9,
  src: '//d2zihajmogu5jn.cloudfront.net/bipbop-advanced/gear3/prog_index.m3u8'
})
</script>

</script>
<style>
.demo-player {
  margin: 0 auto;
  margin-top: 50px;
  width: 640px;
  height: 480px;
}
</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

  let value = playerRef.value?.volume()

set video volume

  playerRef.value?.volume(0.5, true)

Events

Example

<v3d-player
  @canplay="handleCanPlay"
  @loadstart="handleLoadStart"
/>

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

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

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

npm i

dev

npm run dev

build

npm run build