vue-dplayer 视频播放器实例代码

官网vue-dplayerdplayer-doc示例如果默认options中没有视频链接，之后设置视频链接时，直接通过t

官网

vue-dplayer

dplayer-doc

示例

如果默认 options 中没有视频链接，之后设置视频链接时，直接通过 this.options.video.url = videoPath 是无效的

需要先获取到播放器的实例 this.$refs.player.dp ，然后通过 switchVideo() 对 url 进行修改

<template>
 <d-player ref="player" :options="options"></d-player>
</template>

<script type="text/ecmascript-6">
 import dPlayer from 'vue-dplayer'
 import 'vue-dplayer/dist/vue-dplayer.css'

 export default {
 name: 'in-video',
 props: {
 source: {
 type: String,
 default: ''
 }
 },
 data () {
 return {
 player: null,
 options: {
 video: {
 url: ''
 },
 contextmenu: [
 {}
 ]
 }
 }
 },
 mounted() {
 this.player = this.$refs.player.dp
 },
 created() {
 this._setVideoUrl(this.source)
 },
 methods: {
 // 设置视频播放路径
 _setVideoUrl (url) {
 this.player.switchVideo({
 url: url
 })
 }
 },
 components: {
 dPlayer
 }
 }
</script>