vue-better-dplayer

Better use of HLS ,Flv with the latest DPlayer
3,100 4
Install
npm install vue-better-dplayer
Latest Version:0.0.8
Vue:2
License:MIT
Last Updated:Dec 11, 2022
Links: GitHub  ·  npm
Maintainer: bushijie

vue-better-dplayer

To Install:

npm i vue-better-dplayer

To Use:

1| Import the component And Register the component with Vue:

import VueBetterDPlayer from 'vue-better-dplayer'
Vue.use(VueBetterDPlayer)

2| Add it inside your application:

<vue-better-dplayer  style="width: 270px;height: 480px;" @hlsError="networkError" :options=options :model="model"></vue-better-player>

3| Adding Events:

 Hls.js HlsEvents    
 @hlsError="networkError" 
 DPlayer events
 http://dplayer.js.org/zh/guide.html#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A

4| use vue-better-dplayer:

<vue-better-dplayer ref="player" style="width: 270px;height: 480px;" @hlsError="networkError" :options=options :model="model"></vue-better-player>


export default {
    mounted() {
      const player = this.$refs.player
      player.play()
      setTimeout(() => {
        player.pause()
      }, 2000)
    }

Props

prop type default details
model Object null bind model if you need
options Object default DPlayer options

Related Packages

@somoe-net/somoe-video

A Vue 3 video player component with HLS/FLV support

4
hls-player

A hls video player component for Vue.js

863
easy-player

rtmp, hls, flv and websocket player

4,257
@sweet-player/vue

Vue component for sweet-player

6,615 25
ckplayer-plus

Enhanced ckplayer X3 packaging with Vue 2/3 and React wrappers — ESM-ready HTML5...

3,021

Version History

Version Released Vue License
0.0.8 ^2.6.10 MIT
0.0.4 ^2.6.10 MIT
0.0.3 ^2.6.10 MIT
0.0.2 ^2.6.10 MIT
0.0.1 ^2.6.10 MIT