【无标题】swiper轮播中视频带声音自动播放

m0_37653407

于 2023-02-24 14:47:24 发布

阅读量394

点赞数

文章标签：音视频 vue.js javascript

本文链接：https://blog.csdn.net/m0_37653407/article/details/129200625

版权

<template>
	<swiper :options="swiperOptionVideo" ref="mySwiper" @slideChange="slideChangeFunc">
	  <swiper-slide v-for="(item, index) in videoList" :key="item.id" :id="'video' + index">
	    <video :ref="'video' + index" :class="'video' + index" :src="item.url" muted="true" autoplay="autoplay" loop="loop" />
	  </swiper-slide>
	  <div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</template>

<script>
export default {
  data () {
    return {
      // 精彩视频
      videoList: [],
      swiperOptionVideo: {
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 15000
        },
        // 滑动速度
        speed: 800,
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true, // 允许分页点击跳转
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        }
      },
      // 未被禁音的视频对象的ref值
      isNotMutedRef: 'video0',
      // 是否点击过屏幕
      isClick: false,
      // 当前显示的视频ref值
      activeRef: 'video0'
    }
  },
  watch: {
    '$store.state.isClick': {
      handler: function (newVal, oldVal) {
        this.func()
      }
    }
  },
  created () {
    this.isClick = this.$store.state.isClick
    this.initData()
  },
  methods: {
    initData (num) {
      this.$request(this.$api.getData, {
        type: num,
        floor: 0
      }).then(res => {
        res = res.data
        this.videoList = res.data
        if (this.isClick) {
          this.$nextTick(() => {
            this.$refs[this.activeRef][0].play()
            this.$refs[this.activeRef][0].muted = false
            this.isNotMutedRef = this.activeRef
          })
        }
      })
    },
    func () {
      if (!this.isClick) {
        this.isClick = true
        this.$store.commit('SET_IS_CLICK', this.isClick)
        this.$refs[this.activeRef][0].play()
        this.$refs[this.activeRef][0].muted = false
        this.isNotMutedRef = this.activeRef
      }
    },
    slideChangeFunc (e) {
      let index = this.$refs.mySwiper.swiper.realIndex
      this.activeRef = 'video' + index
      if (this.isClick) {
        if (this.isNotMutedRef) {
          this.$refs[this.isNotMutedRef][0].muted = true
        }
        this.$refs['video' + index][0].muted = false
        this.$refs['video' + index][0].play()
        this.isNotMutedRef = 'video' + index
      }
    }
  }
}
</script>