LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.swiper-container {
  height: 500px;
  width: 100%;
}

.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.video-js {
  width: 100%;
  height: 100%;
}

.vjs-control-bar {
  bottom: 30px !important;
}

.holder {
  width: 100%;
  height: 100%;
}
JS
let medias = [
  { id: 'media1', type: 'image', src: 'https://images.pexels.com/photos/5938/food-salad-healthy-lunch.jpg?w=940&h=650&auto=compress&cs=tinysrgb' },
  { id: 'media4', type: 'video', src: 'https://dl.dropboxusercontent.com/s/y44vmwf8htt324y/The-German-Doner-Kebab-Takes-the-UK-by-Storm.mp4'},
  { id: 'media2', type: 'image', src: 'https://images.pexels.com/photos/196643/pexels-photo-196643.jpeg?w=940&h=650&auto=compress&cs=tinysrgb' },
  { id: 'media3', type: 'image', src: 'https://images.pexels.com/photos/5928/salad-healthy-diet-spinach.jpg?w=940&h=650&auto=compress&cs=tinysrgb' },
  { id: 'media5', type: 'video', src: 'https://dl.dropboxusercontent.com/s/m3fu7t9kxbfz9hk/The-Best-Turkish-Doner-kebabs-in-London.mp4'},
]

new Vue({
  el: '#app',
  data: {
    medias: medias
  },
  mounted () {
    let self = this
    this.currentVideoId = undefined
    
    // initialize all video
    this.medias.filter(function(val,key){ 
      return val.type=='video' 
    }).forEach(function(val, key){
      val.video = videojs(val.id, {
            controls: true
      });
    })
    this.swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      onSlideChangeEnd (swiper) {
        let currentMedia = self.medias[swiper.activeIndex]
        console.log(swiper.activeIndex)
        
        // pause previous player
        if(!_.isUndefined(self.currentVideoId)){
          // pause previous player
          let oldPlayer = document.getElementById(self.currentVideoId)
          videojs(oldPlayer).pause()
        }
        
        // play current player
        if(currentMedia.type == 'video') {
          console.log('play the video id: ', currentMedia.id)
          currentMedia.video.play()
          self.currentVideoId = currentMedia.id
        }
      }
    })
  }
})

Description

Create slider with the power of vuejs, swiper, and videojs! Play the video if current slider item is a video, and pause previous video player on slide change
Term
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv