vue仿京东h5头图视频/图片轮播效果组件

实现类似京东的商品头图视频和图片切换轮播展示

<template>
  <div class="activity-rule">
    <div v-if="videoUrl" style="position: relative;">
      <!-- 视频和图片 -->
      <van-swipe
        class="my-swipe"
        indicator-color="#1989fa"
        :loop="false"
        :show-indicators="true"
        :height="swiperHeight"
        @change="swiper_change"
      >
        <!-- 视频 -->
        <van-swipe-item>
          <video-player
            ref="videoPlayer"
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="playerOptions"
            custom-event-name="customstatechangedeventname"
            @pause="onPlayPause()"
            @play="onPlayPlay()"
            @ended="onPlayEnded($event)"
          />
        </van-swipe-item>

        <!-- 图片 -->
        <van-swipe-item v-for="(item,index) in images" :key="index">
          <van-image :src="item">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-swipe-item>

        <template #indicator>
          <div class="custom-indicator"><span>{{ currents + 1 }}/{{ images.length+1 }}</span></div>
        </template>
      </van-swipe>

      <img
        v-if="currents === 0 && isShowPlayIcon"
        src="../../assets/img/video_play.png"
        class="play-icon"
        alt=""
        @click="onPlay"
      >
    </div>

    <!-- 仅图片 -->
    <van-swipe
      v-else
      class="my-swipe"
      indicator-color="#1989fa"
      :loop="true"
      :autoplay="3000"
      :show-indicators="true"
      :height="swiperHeight"
      @change="swiper_change"
    >
      <van-swipe-item v-for="(item,index) in images" :key="index">
        <van-image :src="item">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </van-swipe-item>

      <template #indicator>
        <div class="custom-indicator"><span>{{ currents + 1 }}/{{ images.length+1 }}</span></div>
      </template>

    </van-swipe>

  </div>
</template>
<script>
import { Swipe, SwipeItem, Image } from 'vant'
import Vue from 'vue'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Image)
export default {
  props: {
    videoSrc: {
      type: String,
      default: ''
    },
    headUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShowPlayIcon: true,
      videoUrl: '',
      images: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: '' // url地址
        }],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {// 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: false // 全屏按钮
        },
        width: 0,
        height: 0,
        // 你的封面地址
        poster: ''
      },
      screenWidth: document.body.clientWidth, // body宽
      swiperHeight: 0, // swiper块高

      video_pause: 0, // 判断滑动块位置是不是video
      videoType: true, // 这里判断滑动块是video界面时的视频状态（暂停、播放）

      currents: 0, // 轮播当前号
      jiaobiao_number: 0 // 角标数,根据图片长度和视频长度之和
    }
  },

  computed: {
    player() {
      return this.$refs.videoPlayer && this.$refs.videoPlayer.player
    }
  },
  created() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.swiperHeight = this.screenWidth * 422 / 750// swiper块高和body宽比例取值
        this.videoUrl = this.videoSrc
        // 轮播图
        if (this.headUrl) {
          const urlData = JSON.parse(this.headUrl)
          if (urlData && urlData.length > 0) {
            this.images = urlData.map(item => item.raw.url)
          }
        }

        // 视频
        if (this.videoUrl) {
          // -----------------------修改视频参数------------------------------------
          this.playerOptions['width'] = this.screenWidth// 修改data里playerOptions数组里面的视频宽width
          this.playerOptions['height'] = this.swiperHeight// 修改data里playerOptions数组里面视频高height
          if (this.images && this.images.length > 0) this.playerOptions['poster'] = this.images[0] // 给视频赋第一张图
          this.playerOptions['sources'][0]['src'] = this.videoUrl
          this.player && this.player.player()
        }
      }, 1000)
    })
  },
  methods: {
    swiper_change(index) { // swiper切换
      this.currents = index
      // 有视频的切换
      if (this.videoUrl) {
        var myVideo = document.getElementsByTagName('video')[0]
        console.log(11111111111111, index)
        if (index === 0) {
          console.log(2222222222, myVideo.currentTime, this.video_pause, this.playerOptions)
          this.video_pause = 0// 当在0（视频）处，赋值为0，其他地方赋值为1，为了后面判断切换状态
          if (myVideo.currentTime > 0 && this.videoUrl) { // 判断视频是否被点击观看
            if (this.videoType === true) { // 判断之前离开video滑块时是否暂停播放
              myVideo.play()
            } else {
              return
            }
          }
        } else {
          console.log(333333333333)
          this.video_pause = 1
          myVideo.pause()
        }
      }
    },
    onPlayPause() {
      console.log(666666666, this.video_pause)
      if (this.video_pause === 0) {
        this.videoType = false // 赋值视频已暂停
      }
    },
    onPlayPlay() {
      console.log(7777777777, this.video_pause)
      if (this.video_pause === 0) {
        this.videoType = true // 赋值视频已播放
      }
    },
    onPlayEnded() {
      console.log(8888888888, this.video_pause)
      this.isShowPlayIcon = true
      if (document.fullscreenElement) { // 判断当前视频已经播放结束
        this.$refs.player.exitFullscreen() // 强制退出全屏，恢复正常大小
      }
    },
    onPlay() {
      var myVideo = document.getElementsByTagName('video')[0]
      myVideo.play()
      this.isShowPlayIcon = false
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-indicator {
  width: 78px;
  height: 46px;
  line-height: 46px;
  border-radius: 24px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-size: 20px;
  span{
    display: inline-block;
    width: 33px;
    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 28px;
  }
}
.video-js .vjs-icon-placeholder {
    width: 100%;
    height: 100%;
    display: block;
}
::v-deep {
  .vjs-poster{
    background-size: cover !important;
  }
  .video-js.vjs-ended .vjs-big-play-button {
    visibility: hidden !important;
  }
  .vjs-big-play-button {
    visibility: hidden !important;
  }
  .vjs-error .vjs-error-display:before{
    visibility: hidden !important;
  }
}
  .activity-rule{
    width: 100%;
    background: #FFFFFF;
    border-radius: 10px;
    .play-icon{
      width: 122px;
      height: 122px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .activity-rule-title{
      width: 100%;
      height: 88px;
      position: relative;
      font-size: 28px;
      font-family: 'PingFangSC-Medium, PingFang SC';
      font-weight: 500;
      color: #333333;
      text-align: center;
      line-height: 88px;
      .rule-title-icon1{
        width: 131px;
        height: 4px;
        background: url('../../assets/img/activity_rule_icon1.png') no-repeat left top;
        background-size: 100% 100%;
        position: absolute;
        left: 22%;
        top: 41px;
      }
      .rule-title-icon2{
        width: 131px;
        height: 4px;
        background: url('../../assets/img/activity_rule_icon2.png') no-repeat left top;
        background-size: 100% 100%;
        position: absolute;
        right: 22%;
        top: 41px;
      }
    }
    .activity-rule-box{
      width: 100%;
      padding: 8px 30px 40px 30px;
      box-sizing: border-box;
      color: #999999;
      font-size: 28px;
      line-height: 42px;
      .rule-box-li{
        width: 100%;
        font-size: 24px;
        font-family: 'PingFangSC-Regular, PingFang SC';
        font-weight: 400;
        color: #999999;
        line-height: 38px;
      }
    }
  }
</style>