Vue-awesome-swiper: Add video to slider

[dotdidik]

Can I add video to slider and autoplay when video in slider active?
Thanks

[mihajlon97]

+1

[elviskudo]

+1

[PendicGordan]

+1

[dotdidik]

I find the solution by find swiper activeIndex then play() and pause() the video by this activeIndex.

example:

<template>
  <div class="master">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide data-swiper-autoplay="1000">
        <div>Some slider component</div>
      </swiper-slide>
      <swiper-slide v-for="(vid, index) in sliders.video1" :key="index" :data-swiper-autoplay="vid.duration">
        <video id="video1" type="mp4" muted :src="`http://some.com/video/${vid.video}`"></video>
      </swiper-slide>
      <swiper-slide v-for="(vid, index) in sliders.video2" :key="index" :data-swiper-autoplay="vid.duration">
        <video id="video2" type="mp4" muted :src="`http://some.com/video/${vid.video}`"></video>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliders: {
        "video1": [
            {
                "id": 1,
                "duration": "60000",
                "title": "some title",
                "video": "http://example.com/video/yourvideo.mp4"
            }
        ],
        "video2": [
            {
                "id": 2,
                "duration": "221000",
                "title": "some title 2",
                "video": "http://example.com/video/yourvideo2.mp4"
            }
        ],
      },
      swiperOption: {
          autoplay: {
            delay: 5000,
            disableOnInteraction: false
          },
          centeredSlides: true,
          effect: 'fade',
          onSlideChangeStart:function(){
            this.onActiveIndex()
          }
      }
    }
  },
  mounted() {
    console.log('this is current swiper instance object',this.swiper);
    console.log('active? ',this.swiper.activeIndex );
    this.swiper.on('transitionStart',()=>{
      this.onActiveIndex(this)
      console.log('active? ',this.swiper.activeIndex );

    });
    console.log('hay',this.$refs.mySwiper.swiper.activeIndex)
  },
  methods: {
    onActiveIndex(play) {
      console.log('kamu')
      console.log(play.swiper.activeIndex);
      if(play.swiper.activeIndex==1) {
        var vi =document.getElementById('video1');
          vi.play();
      } else if(play.swiper.activeIndex===1) {
        var vi =document.getElementById('video1');
          vi.pause();
      };
      if(play.swiper.activeIndex==2) {
        var v =document.getElementById('video2');
          v.play();
      } else if(play.swiper.activeIndex===2) {
        var v =document.getElementById('video2');
          v.pause();
      };
    }
  }
}
</script>

<style>

</style>