视频自动播放在 vue-slick-carousel 中不起作用

Question

框架：NUXT SSR。

说明：我们需要在轮播组件内播放视频。由于用户将单击轮播的下一个/上一个按钮或单击视频本身，因此如果再次单击视频，视频应该播放并停止。我们使用 vue-slick-carousel 库。包含视频的幻灯片应居中，并且应在单个视口中出现多个幻灯片。

问题：如果视频较少且位于视口内，则视频可以正常播放。如果视频较多，则轮播可能会调整视口之外的视频。在这种情况下，仅播放视频的音频而不播放视频。而且还很滞后。

我们为此使用 vue-slick-carousel 库。 我在线检查了一个示例：https://codesandbox.io/s/brave-sky-ts09p?file=/src/components/HelloWorld.vue.
即使在上面的示例中，我们也可以看到，如果我们依次单击指示器，则第 4 个视频只播放声音而不播放视频。 我的有一个在单个视图中包含多个视频的用例，我们可以使用 slipsToShow 选项来实现。

这是完整的代码示例：

<template>
<vue-slick-carousel v-bind="slickOptions">
          <div
            v-for="(item, index) in someArray"
            :key="${index}-carousel"
          >
            <video
              :src="item.src"
              playsinline
              :id="`video${index}"
              @click="(e) => changeAutoplayIndex(index, e)"
            ></video>
          </div>
        </vue-slick-carousel>
   </template>
        
   <script>
   data() {
     return {
       slickOptions: {
            initialSlide: 0,
            slidesToShow: 5,
            slidesToScroll: 1,
            centerMode: true,
            arrows: false,
            infinite: true,
            swipe: false,
            autoplay: false,
          }}
     }     
   methods:{     
    changeAutoplayIndex(index, e) {
        setTimeout(() => {
          const lastAutoPlayVideo = document.querySelector('#video${this.autoplayIndex}')
          const currentVideo = document.querySelector('#video${index}')
          
          if (this.autoplayIndex !== null && this.autoplayIndex === index) {
          
            lastAutoPlayVideo.pause()
            
          } else if (this.autoplayIndex !== null) {
          
            lastAutoPlayVideo.pause()  // pausing the previous video
            currentVideo.currentTime = 0 
            currentVideo.play() // starting new video that was clicked.
            
          } else {
            currentVideo.currentTime = 0
            currentVideo.play()
          }
          this.autoplayIndex = index
        }, 200)
      }
}

有人可以推荐一个具有上述用例的库吗？或者帮忙调试这个视频自动播放问题。

Answer 1

我不确定你的实际问题，但你的代码有很多 ESlint 错误，主要是缺少一些反引号。

请尝试以下解决方案

<template>
  <vue-slick-carousel v-bind="slickOptions">
    <div v-for="(item, index) in someArray" :key="`${index}-carousel`">
      <video
        :id="`video${index}`"
        :src="item.src"
        playsinline
        @click="(e) => changeAutoplayIndex(index, e)"
      ></video>
    </div>
  </vue-slick-carousel>
</template>

<script>
export default {
  data() {
    return {
      slickOptions: {
        initialSlide: 0,
        slidesToShow: 5,
        slidesToScroll: 1,
        centerMode: true,
        arrows: false,
        infinite: true,
        swipe: false,
        autoplay: false,
      },
    }
  },
  methods: {
    changeAutoplayIndex(index, e) {
      setTimeout(() => {
        const lastAutoPlayVideo = document.querySelector(
          `#video${this.autoplayIndex}`
        )
        const currentVideo = document.querySelector(`#video${index}`)

        if (this.autoplayIndex !== null && this.autoplayIndex === index) {
          lastAutoPlayVideo.pause()
        } else if (this.autoplayIndex !== null) {
          lastAutoPlayVideo.pause() // pausing the previous video
          currentVideo.currentTime = 0
          currentVideo.play() // starting new video that was clicked.
        } else {
          currentVideo.currentTime = 0
          currentVideo.play()
        }
        this.autoplayIndex = index
      }, 200)
    },
  },
}
</script>

此外，使用

index

的

v-for

来代替

key

根本不是一个想法，实际上甚至是在做相反的事情。

另外，您的问题有[重现]吗？