javascript - vue-dplayer 在选项中传递 url 后不加载视频

Question

我试图让 vue-dplayer 工作，但在使用官方配置后视频无法加载或播放。当我检查生成的代码时，我在页面上看到了 url。

<template>
  <div>
    <d-player @play="play" :options="video" ref="player"></d-player>
  </div>
</template>

<script>
  import VueDPlayer from 'vue-dplayer'
  import 'vue-dplayer/dist/vue-dplayer.css'

  export default {
    name: 'play',
    components: {
      'd-player':VueDPlayer
    },
    data () {
      return {
        video:{
          url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
          pic: '../img/icons/01.jpg'
        }
      }
    },
    methods:{
      play(){
        console.log('play callback')
      }
    },
    mounted(){
      const player = this.$refs.player.dp
    }
  }
</script>

Answer 1

问题很简单，您没有使用正确的键来使用选项对象。您需要有一个包含 video 键的选项对象，但您传递的是一个包含 url 和 pic 键的对象。只需将它包装在一个额外的对象中，这样它就可以找到选项。

data () {
 return {
   options {
     video:{
       url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
       pic: '../img/icons/01.jpg'
     }
   }
  }
}

<d-player @play="play" :options="options" ref="player"></d-player>