Блог

Структура : NUXT SSR.

Пояснение: Нам нужно воспроизвести видео внутри компонента «Карусель». Поскольку пользователь нажмет на кнопку «Далее» / » до » в карусели или нажмет на само видео, видео должно воспроизводиться и останавливаться при повторном нажатии на видео. Для этого мы используем библиотеку vue-скользкой карусели. Слайды, содержащие видео, должны быть центрированы и должны быть несколькими в одном окне просмотра.

Проблема: Если видео меньше и находится внутри окна просмотра, видео воспроизводится правильно. Если видео больше, карусель может корректировать видео за пределами окна просмотра. В этом случае воспроизводится только аудио видео, а не само видео. И это тоже отстает.

Для этого мы используем библиотеку vue-скользкой карусели. Я проверил пример в Интернете для этого: https://codesandbox.io/s/brave-sky-ts09p?file=/src/components/HelloWorld.vue.
Мы можем видеть даже в приведенном выше примере, если мы нажимаем индикаторы один за другим, звук 4-го видео воспроизводится только не видео. У меня есть вариант использования нескольких видео в одном представлении, который мы можем сделать с помощью опции слайд-шоу.

Вот полный пример кода:

 <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 amp;amp; 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)
      }
}
 

Может ли кто-нибудь предложить библиотеку с вышеуказанным вариантом использования? Или помогите устранить проблему с автозапуском видео.

Я не уверен в вашей реальной проблеме, но в вашем коде было много ошибок 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 amp;amp; 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 » — это вообще не идея, на самом деле это даже наоборот.

Кроме того, у вас есть [упрек] по вашей проблеме?