javascript - 如何停止在此 Vue 3 和 Bootstrap 5 轮播中播放除事件视频之外的所有视频？

Question

我正在使用 Vue 3、TypeScript 和电影数据库 (TMDB) 开发 SPA。我还使用 Bootstrap 5 作为 UI。

为了在电影详细信息页面上显示电影预告片，我制作了 TrailerCarousel.vue 组件:

<template>
  <div
    id="trailersCarousel"
    class="carousel slide"
    data-bs-interval="false"
  >
    <ol v-if="movieTrailers.length > 1" class="carousel-indicators">
      <li
        v-for="(video, index) in movieTrailers.slice(0, maxCarouselItems)"
        :key="video.id"
        data-bs-target="#trailersCarousel"
        :data-bs-slide-to="`${index}`"
        :class="{ active: index === 0 }"
      >
        {{ index + 1 }}
      </li>
    </ol>

    <div class="carousel-inner">
      <div
        v-for="(video, index) in movieTrailers.slice(0, maxCarouselItems)"
        :key="video.id"
        class="carousel-item"
        :class="{ active: index === 0 }"
      >
        <iframe
          class="embed-responsive-item"
          :src="`https://www.youtube.com/embed/${video.key}`"
        ></iframe>
      </div>
    </div>

    <button
      v-if="movieTrailers.length > 1"
      class="carousel-control-prev"
      type="button"
      data-bs-target="#trailersCarousel"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon"></span>
    </button>

    <button
      v-if="movieTrailers.length > 1"
      class="carousel-control-next"
      type="button"
      data-bs-target="#trailersCarousel"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TrailerCarousel",

  props: {
    movieTrailers: Array,
  },

  data() {
    return {
      maxCarouselItems: 5
    } 
  },
});
</script>

<style scoped lang="scss">
.carousel-indicators {
  li {
    text-indent: 0;
    margin: 0 2px;
    font-size: 12px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: none;
    border-radius: 50%;
    color: #333;
    background-color: #fff;
    transition: all 0.25s ease;
    &.active,
    &:hover {
      margin: 0 2px;
      background-color: #0b8a52;
      color: #fff;
    }
  }
}

.carousel-control-next,
.carousel-control-prev {
  width: 7.5%;
}

.carousel-item {
  padding-top: 56.25%;
  height: 0px;
  position: relative;
}

iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

我在src\components\MovieDetails.vue中使用上述组件:

<div v-if="movieTrailers.length" class="mb-3">
    <h2 class="section-title">Trailers</h2>
    <TrailerCarousel :movieTrailers = "movieTrailers" />
</div>

堆栈 Blitz

我整理了一个 Stackblitz 与代码。

请注意，“www.youtube.com 拒绝连接”错误仅出现在 Stackblitz 上(出于我无法弄清楚的原因)。 p>

问题

当从一个预告片导航到另一个预告片并播放它们时，之前播放的预告片不会停止并且它们重叠，我的意思是声音重叠。

我一直无法找到一种方法来防止这种情况发生。

实现预期结果的可靠方法是什么？

Answer 1

我想有很多方法可以解决这个问题。一种方法是暂停视频 iframe。没有尝试，但我相信像下面这样的东西会起作用:

const previousActiveIframe = document.querySelectorAll('.carousel-item.active iframe') as HTMLIFrameElement

previousActiveIframe?.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')

---

但另一个简单的解决方案是在幻灯片更改时重新渲染 iframe:

  data() {
    return {
      maxCarouselItems: 5,
      iframeRendererCount: 0, // 👈
    }
  },

  methods: {
    onSlideChange() {
      this.iframeRendererCount++
    }
}

<iframe
  :key="iframeRendererCount"
  :src="`https://www.youtube.com/embed/${video.key}`"
  frameborder="0"
  allowfullscreen
></iframe>