如何在Vue.js项目中通过YouTube API播放搜索结果中的下一个视频

需要修改的内容 #

• 调整data配置，新增两个状态变量，用来记录当前播放的位置和所有搜索结果的视频ID集合
• 修正模板渲染错误，原有模板中使用了不存在的info变量，同时v-for的key属性配置错误
• 完善playlist方法的初始化逻辑，接收到搜索结果后自动提取视频ID列表，初始化播放位置
• 实现nextVideo的切换逻辑，处理边界情况，自动切换到下一个视频

修改后完整代码 #

<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="searchResult">
            <li v-for="(item, index) in searchResult.items" :key="item.etag">
              <p class="text">{{ item.snippet.videoId }}</p>
            </li>
          </ul>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import SearchComponent from "./SearchComponent.vue";
export default {
  components: { SearchComponent },
  name: "PlayerComponent",
  props: {
    msg: String,
  },
  data() {
    return {
      searchResult: null,
      videoId: "lG0Ys-2d4MA",
      // 新增状态：当前播放的视频在搜索结果列表中的索引
      currentPlayIndex: 0,
      // 新增状态：所有搜索结果的视频ID集合
      videoIdList: []
    };
  },
  mounted() {},
  methods: {
    updateVideoId(payload) {
      // 如果是手动点击搜索结果切换视频，同步更新当前索引
      const targetIndex = this.videoIdList.findIndex(id => id === payload);
      if (targetIndex > -1) {
        this.currentPlayIndex = targetIndex;
      }
      this.videoId = payload;
    },
    nextVideo() {
      // 无搜索结果时直接返回
      if (!this.videoIdList.length) return;
      // 索引自增，超出列表长度则回到开头，不需要循环可替换为如下逻辑
      // if (this.currentPlayIndex < this.videoIdList.length -1) {
      //   this.currentPlayIndex++
      // }
      this.currentPlayIndex = (this.currentPlayIndex + 1) % this.videoIdList.length;
      this.videoId = this.videoIdList[this.currentPlayIndex];
      // 需要切换后自动播放可打开下面注释
      // this.player.playVideo();
    },
    playlist(payload) {
      this.searchResult = payload;
      // 提取所有搜索结果的视频ID
      this.videoIdList = payload.items.map(item => item.snippet.videoId);
      // 初始化播放位置为第一个搜索结果
      this.currentPlayIndex = 0;
      this.videoId = this.videoIdList[this.currentPlayIndex];
      console.log("playlist初始化完成", payload);
    },
    playVideo() {
      if (!this.videoIdList.length) return;
      this.player.loadPlaylist({
        list: this.videoIdList,
        listType: "playlist",
        index: this.currentPlayIndex,
        startSeconds: 0,
      });
      this.player.playVideo();
    },
    stopVideo() {
      this.player.stopVideo();
    },
    playing() {
      console.log(" we are watching!!!");
    },
  },
  computed: {
    player() {
      return this.$refs.youtube.player;
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者JOHn