vue-dplayer2

A player based dplayer and vuejs!

适用于 Vue 的 dplayer 播放器组件。

Example

Demo Page

More Example Code

Install

CDN（源码不会打包到项目中）

<!-- 支持flv（.flv）播放，需要在Dplayer.min.js之前引入flv.min.js文件 -->
<script type="text/javascript" src="path/to/flv.min.js"></script>
<!-- 支持hls（.m3u8）播放，需要在Dplayer.min.hls.min.js文件 -->
<script type="text/javascript" src="path/to/hls.min.js"></script>

<script type="text/javascript" src="path/to/DPlayer.min.js"></script>

mount with global

import dplayer from 'vue-dplayer2/player';
Vue.component('vue-dplayer', dplayer);

<template>
  <vue-dplayer />
</template>

mount with component

<template>
  <vue-dplayer />
</template>
<script>
import dplayer from 'vue-dplayer2/player';
export default {
  components: { 'vue-dplayer': dplayer }
}
</script>

NPM（源码会打包到项目中）

import dplayer from 'vue-dplayer2';
Vue.use(dplayer); // or Vue.use(window.VueDPlayer);

<template>
  <vue-dplayer />
</template>
<script>
import 'flv.js'; // 支持flv（.flv）播放
import 'hls.js'; // 支持hls（.m3u8）播放
export default {
}
</script>

API

• component api:

  • id : [ String, default: 'vueDplayer' ] : the container for dplayer
  • options : [ Object, default: {} ] : the options for dplayer.options，must prop!
  • @play : [ Function, default: () => {} ] : the play event for dplayer.events
  • @pause : [ Function, default: () => {} ] : the pause event for dplayer.events
  • ...（其他的事件）
  • 通过$refs获取实例上属性及方法请参考：examples

• dplayer api

  • dplayer options
  • dplayer api
  • dplayer events
  • dplayer docs

Author

jefferyE