仿照天猫等实现视频与图片的轮播效果
1.视频播放器：腾讯云点播超级播放器官方文档地址（一定要看） 2.轮播插件：iSlider----这是一个表现出众，轻量且高性能，无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景，提供多种切换动画效果，展示多种类型的场景。GitHub中文地址
话不多说 直接上代码吧~~~（简单直接，哈哈哈哈哈）
这个需求里面的视频的播放地址是通过后台返回的，所以嘛~~~先在页面创建一个容器来供视频的初始化（详细信息看文档啦）ps:class为operate的是为了在视频上面增加一个按钮，暂时可以忽略不看 主要是id为video <div id="video_model" class="video_model" @click="handlePlayVideo()"> <video id="video" preload="auto" x5-playsinline playsinline="true" webkit-playsinline="true"></video> <div class="operate" v-if="initPlay"> <div class="icon"></div> </div> </div>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 = '<a href="'+ element.target_url +'"><img src="'+element.url+'"/></a>'; if(!element.target_url) content = '<img src="'+element.url+'"/>'; 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) } },