Question

我使用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
    }
  }
}

为什么首次点击“播放”后视频无法开始播放。如何解决？

Answer 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()
    }
  }
}

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

1 个答案: