Is there a way to only allow the active video to play while disabling the others in this Vue 3 and Bootstrap 5 carousel?

Question

Is there a way to only allow the active video to play while disabling the others in this Vue 3 and Bootstrap 5 carousel?

I'm currently developing a Single Page Application (SPA) using Vue 3, TypeScript, and The Movie Database (TMDB). Additionally, I'm incorporating Bootstrap 5 for the UI.

To showcase movie trailers on the movie details page, I've created the TrailerCarousel.vue component:

<template>
  // Component code here
</template>

<script lang="ts">
  // Script code here
</script>

<style scoped lang="scss">
  // Styling code here
</style>

I utilize this component in src\components\MovieDetails.vue:

<div v-if="movieTrailers.length" class="mb-3">
    // Movie Details code here
</div>

Stackblitz

For a demonstration, I've created a Stackblitz with the code.

Please note that the "www.youtube.com refused to connect" issue only occurs on Stackblitz for reasons unknown.

The Issue

While transitioning between trailers and playing them, the previously playing one does not stop, resulting in sound overlap. I'm struggling to find a solution to this problem.

What would be the most effective approach to achieve the desired outcome?

javascript vue.js vuejs3 bootstrap-5

Answer 1

Answer №1

There are various methods to tackle this issue, in my opinion. One approach could involve pausing the video iframe. While I haven't personally attempted it, I believe something like the following could be effective:

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

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

Alternatively, a simpler solution could be to refresh the iframe whenever the slide changes:

  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>

Answer 2

There are various methods to tackle this issue, in my opinion. One approach could involve pausing the video iframe. While I haven't personally attempted it, I believe something like the following could be effective:

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

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

Alternatively, a simpler solution could be to refresh the iframe whenever the slide changes:

  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>

Answer 3

Answer №2

If you're looking to address this issue effectively, consider utilizing the Youtube IFrame Player API. This API enables you to manage Youtube videos in a standardized manner.

To begin, incorporate the youtube-player package into your project:

npm install youtube-player

Next, update the content of your component TrailerCarousel.vue with the following code:

<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">
      <!-- Add `ref` to div element to get reference to it in script -->
      <div v-for="(video, index) in movieTrailers.slice(0, maxCarouselItems)" :key="video.id" class="carousel-item"
        :class="{ active: index === 0 }" :ref="el => itemRefs.push(el)" :data-id="video.key">
        <!-- <iframe class="embed-responsive-item" :src="`https://www.youtube.com/embed/${video.key}`"></iframe> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import YT from "youtube-player";

export default defineComponent({
  name: "TrailerCarousel",

  props: {
    movieTrailers: {
      type: Array,
      required: true,
    },
  },

  // Additional code and explanations provided within the script

</script>

<style scoped lang="scss">
.carousel-indicators {
  margin-bottom: 10px;

  // Updated styling information

</style>

I've clarified the code changes made and provided insights into the modifications. While the code currently works, it could benefit from enhanced typing, error handling, and event management.

Additional Points:

For vue3, it's encouraged to use vite as the build tool.
Utilize setup in <script lang='ts'> and composition API to reduce boilerplate code.

Answer 4

If you're looking to address this issue effectively, consider utilizing the Youtube IFrame Player API. This API enables you to manage Youtube videos in a standardized manner.

To begin, incorporate the youtube-player package into your project:

npm install youtube-player

Next, update the content of your component TrailerCarousel.vue with the following code:

<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">
      <!-- Add `ref` to div element to get reference to it in script -->
      <div v-for="(video, index) in movieTrailers.slice(0, maxCarouselItems)" :key="video.id" class="carousel-item"
        :class="{ active: index === 0 }" :ref="el => itemRefs.push(el)" :data-id="video.key">
        <!-- <iframe class="embed-responsive-item" :src="`https://www.youtube.com/embed/${video.key}`"></iframe> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import YT from "youtube-player";

export default defineComponent({
  name: "TrailerCarousel",

  props: {
    movieTrailers: {
      type: Array,
      required: true,
    },
  },

  // Additional code and explanations provided within the script

</script>

<style scoped lang="scss">
.carousel-indicators {
  margin-bottom: 10px;

  // Updated styling information

</style>

I've clarified the code changes made and provided insights into the modifications. While the code currently works, it could benefit from enhanced typing, error handling, and event management.

Additional Points:

For vue3, it's encouraged to use vite as the build tool.
Utilize setup in <script lang='ts'> and composition API to reduce boilerplate code.

Answer 5

Answer №3

This is the way in which it has been put into action.

Answer 6

This is the way in which it has been put into action.

Is there a way to only allow the active video to play while disabling the others in this Vue 3 and Bootstrap 5 carousel?

Stackblitz

The Issue

What would be the most effective approach to achieve the desired outcome?

Answer №1

Answer №2

Answer №3

Similar questions

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

Include the HTTP header in a GET request for an HTML hyperlink

Tips for transferring an array from a form to a URL using JavaScript?

Utilizing jQuery Methods within Node.js

What is the best way to record and share a video with jquery and laravel?

Steps to creating a nested function

Retrieve information from a URL using an Express API

Scrollmagic - Creating dynamic effects by animating body and div backgrounds using multiple tweens

Ways to align div elements

Mastering the art of debugging a mongoose action in node.js

How come my JavaScript regular expression doesn't function properly when applied to elements in an array?

Appending a forward slash at the end of a URL seamlessly directs the user to a serendipitous webpage experience, while

Ways to showcase Firebase information with multi-tiered keys in an HTML table?

Creating a Three by Three Grid with HTML and CSS

Can you explain the inner workings of the sort function in JavaScript, including how it utilizes the compare

The functionality of ng-click and ng-submit seems to be malfunctioning

Issue with displaying Vue.js page within iframe in Firefox

Using Jquery for a Second Timer

Enhancing Material UI KeyboardDatePicker with personalized CSS design

Utilizing an external type definition in JSDoc @typedef