vue-dplayer视频播放器组件的使用详解

<template>
  <div>
    <vue-dplayer :options="options"></vue-dplayer>
  </div>
</template>
<script>
import VueDPlayer from 'vue-dplayer'
export default {
  components: {
    VueDPlayer
  },
  data () {
    return {
      options: {
        video: {
          url: 'http://cdn.localhost:8080/mov_bbb.mp4',
          pic: 'http://cdn.localhost:8080/mov_bbb.jpg'
        }
      }
    }
  }
}
</script>

<vue-dplayer :options="options">
  <source src="http://cdn.localhost:8080/test.webm" type="video/webm">
</vue-dplayer>

{
  video: {
    url: 'http://cdn.localhost:8080/test.mp4',
    pic: 'http://cdn.localhost:8080/test.jpg'
  },
  pluginOptions: {
    watermark: {
      image: '/path/to/image',
      link: 'http://example.com',
      margin: {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
      },
      opacity: 0.8,
      className: 'your-custom-logo-class'
    },
    progress: {
      show: true,
      className: 'your-custom-progress-class',
      tooltip: true
    }
  }
}

import Vue from 'vue'
import VueDPlayer from 'vue-dplayer'
import DPlayer from 'dplayer'
import 'dplayer/dist/DPlayer.min.css'
import SpeedPlugin from 'dplayer-speed-plugin'
// Use DPlayer plugin
DPlayer.install(SpeedPlugin)
Vue.use(VueDPlayer, {
  options: {
    video: {
      url: 'http://cdn.localhost:8080/test.mp4',
      pic: 'http://cdn.localhost:8080/test.jpg'
    },
    plugins: [
      SpeedPlugin
    ]
  }
})

// 导入Vue和Vue DPlayer组件
import Vue from 'vue';
import VueDPlayer from 'vue-dplayer';
// 设置组件的名称
VueDPlayer.name = 'VueDPlayer';
// 全局注册Vue DPlayer组件
Vue.component('VueDPlayer', VueDPlayer);

Vue.component('VueDpayer', VueDPlayer);

<template>
  <div>
    <vue-d-player :options="options"></vue-d-player>
  </div>
</template>