在vue-youtube播放器中动态更改playerOptions?

时间:2019-07-26 08:15:08

标签: javascript vue.js youtube-iframe-api

我将视频ID列表加载到我的小型Vue应用中。我使用npm包“ vue-youtube”:“ 1.3.4”。通过选择元素,我可以选择一个新的视频。我想禁用某些视频中的控件。 我的问题是:功能changeVideo中的参数控件已更改为0,我也可以在vue开发工具中看到它,但是当前视频仍在启用控件的情况下显示:(

<template>
 <div>
  <select
   :value="currentVideo.videoId"
   @input="changeVideo"
  >
    <option
      v-for="option in options"
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>

  <youtube
    :video-id="currentVideo.videoId"
    :player-vars="playerOptions"
    ref="youtube"
  />
 </div>
</template>
<script>
  export default {
    name: 'app',
    components: {},

     props: {
      playlistId: {
        type: String,
        default: 'myid'
      },
      apiKey: {
        type: String,
        default: 'myapikey',
      },
    },

    data() {
      return {
        api: {
          url: 'https://www.googleapis.com/youtube/v3/playlistItems',
        },
        currentVideo: {},
        playlist: [],
        playerOptions: {
          rel: 0,
          autoplay: 0,
          showinfo: 0,
          controls: 1,
        },
      }
    },
    methods: {
     async changeVideo(event) {
        this.playerOptions.controls = 0
        await this.player.stopVideo()
        const selectedVideo = this.playlist.find(video => video.videoId === 
        event.target.value)

        this.currentVideo = {...selectedVideo}
        await this.player.loadVideoById(this.currentVideo.videoId)
        this.player.playVideo()
       },
    },
     computed: {
       player() {
        return this.$refs.youtube.player || null
       },
     },
</script>

我的应用程序其他部分显然还有更多的逻辑(在mount()中获取视频,依此类推),但是它们可以正常工作。这些是我认为最相关的部分。

0 个答案:

没有答案
相关问题