如何将视频ID分配给变量并一步播放？答案

【问题标题】：How to assign video id to variable and play it in one step?如何将视频ID分配给变量并一步播放？
【发布时间】：2017-12-10 20:24:41
【问题描述】：

我使用this 组件

我想为 YouTube 视频 ID 创建输入字段，并通过单击“播放”按钮开始播放视频。问题是下一个：当我点击“播放”时，我看到ID被分配给videoId，但是为了真正开始播放视频，我需要再次点击“播放”。

但是，如果 videoId 是硬编码的 (videoId: 'lG0Ys-2d4MA')，视频会在第一次点击 play 时开始播放。此外，如果输入的v-model="videoId"（不是providedId）视频正在立即下载并且通过单击play 它开始播放，但是一旦input 被更改我不需要自动下载 - 我想下载视频只是点击play。

以下是最小的可重现示例

模板

<input type="text" v-model="providedId"/>
<button @click="playVideo">play</button>
<youtube :video-id="videoId" ref="youtube"></youtube>

脚本

export default {
  data () {
    return {
     videoId: '', // <<-- empty srting
     providedId: ''
    }
  },
  methods: {
    playVideo () {
      this.videoId = this.providedId // <<-- assign video id
      this.player.playVideo()
    },
  },
  computed: {
    player () {
      return this.$refs.youtube.player
    }
  }
}

为什么在第一次点击“播放”后视频没有开始播放。如何解决？

【问题讨论】：

你能代替this.videoId = 'lG0Ys-2d4MA'试试this.player.loadVideoById('lG0Ys-2d4MA')吗？否则我担心它的限制是视频只能在用户互动后播放。

标签： javascript youtube vuejs2 vue-component

【解决方案1】：

我找到了解决办法。

模板

<input type="text"v-model="urlOrId"/>
<button @click="playVideo">play</button>
<youtube :video-id="videoId" :player-vars="playerVars" ref="youtube"></youtube>

脚本

export default {
  data () {
    return {
      videoId: '',
      urlOrId: '',
      playerVars: {
        autoplay: 1
      }
    }
  },
  computed: {
    player () {
      return this.$refs.youtube.player
    }
  },
  methods: {
    playVideo () {
      // Extract id of the video from URL
      if (this.urlOrId.search('youtube.com') !== -1) {
        this.videoId = this.$youtube.getIdFromUrl(this.urlOrId)
      } else {
        this.videoId = this.urlOrId
      }

      this.player.playVideo()
    }
  }
}

【讨论】：