Skip to content

lin557/v3d-player

Repository files navigation

v3d-player

Html5 Video Player: vue3 + typescript + dplayer-lite

Dplayer Docs

Supports

  • Streaming formats

  • 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