vue项目里面视频与图片的轮播

需求

仿照天猫等实现视频与图片的轮播效果

运用的控件有：

1.视频播放器：腾讯云点播超级播放器官方文档地址（一定要看）
2.轮播插件：iSlider----这是一个表现出众，轻量且高性能，无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景，提供多种切换动画效果，展示多种类型的场景。GitHub中文地址

代码块

话不多说 直接上代码吧~~~（简单直接，哈哈哈哈哈）

1. 这个需求里面的视频的播放地址是通过后台返回的，所以嘛~~~先在页面创建一个容器来供视频的初始化（详细信息看文档啦）ps:class为operate的是为了在视频上面增加一个按钮，暂时可以忽略不看 主要是id为video

2.播放地址是通过调product/info返回的 —返回的信息里面有视频还有图片 需要加以判断 因为需要把视频显示在第一位
initTCPlayer () ----初始化视频
先初初始化视频，dom上面才会有个固定的值 才可以去初始化轮播（表示这个地方坑了我~~~）
initIslider() -----初始化轮播
实例化之后的对象的方法可以参考文档 表示我这边就用了最最简单的pause()以及play()，文档上面的方法以及属性表示还是蛮多的~

 data () {
    	return {
    		banner_url:[],//初始化轮播图的元素
    		initPlay:true,//控制是否显示视频上面的按钮
    	}
    }
  mounted (){
    	this.getProductInfo(this.product_id);
   }
   methods: {
		async getProductInfo (product_id) {
		      var self = this;
		      let res = await api.post('product/info', {product_id});
		      if (res.code === 0) {
		        let data = res.data;
		        if(data.banner_info && data.banner_info.length != 0){
		          data.banner_info.forEach(element => {
		            if(element.type == 'img'){
		              var content = '';
		              if(!element.target_url) content = '';
		              self.banner_url.push({content:content});
		            }
		            if(element.type == 'video'){
		              self.initTCPlayer(element.url);
		            }
		          });
		        self.initIslider();
		      }
			}
		 }
	    // 初始化视频播放器
	    initTCPlayer (fileID) {
	      var self = this;
	      const CONFIG = {
	        fileID: fileID,
	        appID: KZ_CONFIG.TCPlayer_appID,
	        // poster: "https://cos-attachment-cdn.daoshituan.com/kms/2019-05-09/607aead5-a014-471e-a819-3fe4b9f0ed70.png?sign=28LXFo1VCfkAP21YKG4ooL9xsIZhPTEyNTQzNjgzNjcmaz1BS0lEZDZLSjRRcmNiTXRCRDFjUnB5c1oxRUN3UlZWR3JYY1MmZT0xNTU3OTg4Mjc5JnQ9MTU1Nzk4NjQ3OSZyPTE1MjE3NDAxNjkmZj0va21zLzIwMTktMDUtMDkvNjA3YWVhZDUtYTAxNC00NzFlLWE4MTktM2ZlNGI5ZjBlZDcwLnBuZyZiPWF0dGFjaG1lbnQ=",
	        controlBar: {
	          playbackRateMenuButton: false,
	          QualitySwitcherMenuButton: false,
	          volumePanel: false
	        },
	        bigPlayButton:false,
	        plugins:{
	          ContinuePlay:{
	            auto:true
	          }
	        }
	      };
	      let player = TCPlayer('video', CONFIG);
	      this.KZPlayer = player;
	
	      // 播放器初始化完成
	      player.ready(() => {
	        // 视频可以播放
	        player.on('canplay', () => {
	          this.initPlay = true;
	          console.log('canplay ----------------------------------');
	        });
	
	        // 开始播放
	        player.on('play', () => {
	          this.initPlay = false;
	          console.log('play ----------------------------------');
	        });
	
	        // 正在播放
	        player.on('playing', () => {
	          this.initPlay = false;
	          if(this.islider){
	            this.islider.pause();//轮播暂停
	          }
	          console.log('playing ----------------------------------');
	        });
	
	        // 暂定播放
	        player.on('pause', () => {
	          if(this.islider){
	            this.islider.play();//轮播开始
	          }
	          console.log('pause ----------------------------------');
	        });
	
	        // 全屏状态切换时触发
	        player.on('fullscreenchange', () => {
	          player.play();
	          if(this.islider){
	            this.islider.pause();//轮播暂停
	          }
	          console.log('fullscreenchange ----------------------------------');
	        });
	      
	        // 播放完毕
	        player.on('ended', () => {
	          console.log('ended ----------------------------------');
	
	          if (player.isFullscreen()) {
	            player.exitFullscreen();
	          }
	        });
	      });
	      self.banner_url.unshift({content:document.getElementById('video_model')});
	    },
	    initIslider(){
	      var self = this;
	      if(self.banner_url.length != 0){
	        setTimeout(function(){
	          self.islider = new iSlider(document.getElementById('iSlider-wrapper'), self.banner_url, {
	            isLooping: 1,
	            isOverspread: 1,
	            isAutoplay: true,
	            duration:3000,//每个场景停留时间，结束时会切换至下一场景
	            animateTime: 300,
	            animateType: 'default',
	            isOverspread:true,
	            fixPage:false,
	            animateEasing:'linear',
	            plugins: [['dot', {background:'0,0,0,0'}]],
	        }, 600); 
	          self.islider.on('slideChange', (index) => {
	            if(index != 0){
	              self.KZPlayer.pause();
	            }
	            // else{
	            //   self.KZPlayer.play();
	            // }
	          },true)
	        }, 300)
	      }
	    },