如何使用 vue js 在搜索结果 youtube api 中播放下一个视频？答案

【问题标题】：How do i play next video in my search results youtube api using vue js?如何使用 vue js 在搜索结果 youtube api 中播放下一个视频？
【发布时间】：2021-12-30 15:42:14
【问题描述】：

所以我有一个搜索组件，搜索组件将数据发送到父 player.component。我将视频 ID 和一个包含 5 个搜索结果的对象发送到 player.component。

<template>
  <div class="mobile-screen">
    <b-container>
      <search-component
        v-on:updateVideoId="updateVideoId($event)"
        v-on:playlist="playlist($event)"
      />

      <youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>

      <button @click="playVideo">play</button>
      <button @click="stopVideo">stop</button>
      <button @click="nextVideo">next</button>
      <b-row>
        <b-col>
          <ul v-if="info">
            <li v-for="(item, index) in info.items" :key="index.etag">
              <p class="text">{{ item.snippet.videoId }}</p>
            </li>
          </ul>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

所以我可以访问 videoId 和搜索结果对象。但我希望我的播放器能够在我的搜索结果中播放下一个视频，但我不确定如何做到这一点。

<script>
import SearchComponent from "./SearchComponent.vue";
//import axios from "axios";
export default {
  components: { SearchComponent },
  name: "PlayerComponent",
  props: {
    msg: String,
  },
  data() {
    return {
      searchResult: null,
      videoId: "lG0Ys-2d4MA",
    };
  },
  mounted() {},
  methods: {
    updateVideoId(payload) {
      this.videoId = payload;
    },
    nextVideo() {},
    playlist(payload) {
      this.searchResult = payload;
      console.log("playlist", payload);
      this.player.nextVideo();
    },
    playVideo() {
      this.player.loadPlaylist({
        list: String,
        listType: String,
        index: Number,
        startSeconds: Number,
      });
      this.player.playVideo();
    },
    stopVideo() {
      this.player.stopVideo();
    },
    playing() {
      console.log(" we are watching!!!");
    },
  },
  computed: {
    player() {
      return this.$refs.youtube.player;
    },
  },
};
</script>

【问题讨论】：

标签： javascript vue.js youtube-api google-developers-console

【解决方案1】：

我没有看到那里正在处理 searcResult，您需要将 videoId 更改为您的 searchResult id。

基本上搜索的时候，将videoId更新为对应的搜索结果ID。

也许为此编写一个方法，然后使用 `this.videoId = newId' 它将改变正在播放的视频

【讨论】：