vue-防淘寶商品介紹輪播（有圖或視頻）

大致樣式：初始都展示圖片，如有視頻，點擊圖片即可播放。

坑點與要求：  1.若是圖片，則不顯示視頻，若是視頻，點擊圖片則播放視頻

　　      2.切換輪播時，關閉其他視頻，只播放當前視頻 （在swiperOptin中配置）

             3.退出當前路由時，停止播放所有視頻

 

 

 完整代碼：

<!--
 * @Author: lingxie
 * @Date: 2020-05-29 18:14:50
 * @Descripttion: 
--> 
<template>
  <!-- 介紹輪播 -->
  <div class="lunbo-wrap" v-if="banner_list.length > 1">
    <swiper class="lunbo-box" ref="banner" :options="swiperOption">
      <swiper-slide v-for="(i, idx) in banner_list" :key="'banner'+idx">
        <img
          @click.stop="handlePlayVideo(i.is_media,idx,i.jumpData)"
          :class="{'hidden':curLunboIdx == idx}"
          :id="'poster_' + idx"
          :src="i.ad_code"
          alt
        />
        <div class="video-box" :id="'video-box_' + idx" v-if="+i.is_media==1">
          <video
            :id="'video_' + idx"
            preload="preload"
            playsinline="true"
            webkit-playsinline="true"
            x5-playsinline="true"
            x-webkit-airplay="true"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            controls
            loop="loop"
          >
            <source :src="i.jumpData.value" type="video/mp4" />
            <source :src="i.jumpData.value" type="video/ogg" />暫不支持視頻播放，請升級瀏覽器
          </video>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" v-if="banner_list.length>1"></div>
    </swiper>
  </div>
</template>
<script>
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
   components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      banner_list: [
        {
          ad_id: "289",
          ad_name: "科尚X7EVbanner",
          type: "99",
          ad_link: "",
          ad_code:"https://img.oushangstyle.com/images/afficheimg/2020/04/2865ea55819124b6.jpg",
          position_id: "21",
          ad_name_son: "",
          is_media: "1",
          jumpData: {
            type: "99",
            value:"https://vdept.bdstatic.com/59434d484e7368506a68785159323773/70727a4975483532/8ce0428afd5be136aea69a2225d501e54ce91ed5d8c2b774848f3aeec75f5988ceca77c9e970b0b86036140c7da758373e9efed4f67fa442cf2581ddf36d6ebc.mp4?auth_key=1590756522-0-0-5968076caacc5d27e3a99bd82d081d74"
          },
          location_address: ""
        },
        {
          ad_id: "314",
          ad_name: "科尚X7EVbanner",
          type: "99",
          ad_link: "",
          ad_code:"https://img.oushangstyle.com/images/afficheimg/2020/04/2745ea5c0e38224f.jpg",
          position_id: "21",
          ad_name_son: "",
          is_media: "0",
          jumpData: {
            type: "99",
            value:"http://www.baidu.com"
          },
          location_address: ""
        },
        {
          ad_id: "314",
          ad_name: "科尚X7EVbanner",
          type: "99",
          ad_link: "",
          ad_code:"https://img.oushangstyle.com/images/afficheimg/2020/04/2745ea5c0e38224f.jpg",
          position_id: "21",
          ad_name_son: "",
          is_media: "1",
          jumpData: {
            type: "99",
            value:"https://vdept.bdstatic.com/5a4d36417a534855314361476b456133/746e6e724e597170/648c257b62e6b57022f197cb954295b7fb4e4d875e647e48426bf6f6d24ce695748ad152ebeca43ac68a3f7dda04646d.mp4?auth_key=1590755035-0-0-8c80258bebdd910ca94e4c1eaa479f8f"
          },
          location_address: ""
        }
      ],
      curLunboIdx: -1, //當前輪播索引
      swiperOption: {//輪播選項配置
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        loop: false, //循環
        autoplay: 2000, //每張播放時長2秒，自動播放
        speed: 1500, //滑動速度
        on:{
          // 輪播切換后，上一個swiper-slie有視頻，則暫停
          slideNextTransitionStart:function(){
            let index = this.activeIndex;
            console.log('當前輪播',index);
            let box = this.$wrapperEl[0];
            console.log(box);           
            let slide = box.getElementsByClassName('swiper-slide')[index-1];
            // console.log('當前滑塊',slide);
            if(slide){
              var child = slide.children;
              // console.log(child);           
            }
            // console.log('孩子',child);
            // 判斷有無視頻
            if(child.length==2){
              let video = child[1].children[0];
              // console.log(video);
              video.pause();
            }

          },
          slidePrevTransitionStart:function(){
            let index = this.activeIndex;
            // console.log('當前輪播',index);
            let box = this.$wrapperEl[0];
            // console.log(box);           
            let slide = box.getElementsByClassName('swiper-slide')[index+1];
            // console.log('當前滑塊',slide);
            if(slide){
              var child = slide.children;
              // console.log(child);           
            }
            // console.log('孩子',child);
            // 判斷有無視頻
            if(child.length==2){
              let video = child[1].children[0];
              // console.log(video);
              video.pause();
            }
          },
        }
      },
    };
  },
  beforeRouteLeave(to, from, next) {
    this.handlePauseVideo();
    next()
  },
  methods:{
    // 視頻播放
    handlePlayVideo(is_media,idx, jumpData) {
      // 若是視handlePlayVideo頻，且視頻地址存在，點擊播放
      if (is_media ==1 && jumpData.value) {
        let c_video_box = document.getElementById("video-box_" + idx);
        let c_video = document.getElementById("video_" + idx);
        // console.log('當前視頻',c_video);
        c_video_box.style.zIndex = 5;
        this.curLunboIdx = idx;
        if(c_video){
           c_video.play();
        };
      } 
      //否則是圖片，存在jumpData就跳轉
      if (is_media ==0 && jumpData) {
        this.toJump(jumpData);
      }
    },
    // 視頻暫停
    handlePauseVideo(){
      let vList = document.querySelectorAll(".video-box video");
      for(var i=0;i<vList.length;i++){
        vList[i].pause();
      }
    },
    // 圖片跳轉
    toJump(data) {
      if (data.value) {
        window.location.href = data.value
      }
    },
  }
};
</script>
<style lang="less" scoped>
// 輪播
.lunbo-wrap {
  width: 100%;
  position: relative;
  padding-bottom: 100%;
  .lunbo-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      position: relative;
      z-index: 4;
      &.hidden {
        display: none;
      }
    }
    .video-box {
      position: absolute;
      width: 100%;
      height: 100%;
      // top: 50%;
      // transform: translateY(-50%);
      z-index: 3;
      > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  /deep/ .swiper-pagination {
    .swiper-pagination-bullet-active {
      background: #ffffff;
    }
  }
}
</style>