vue 商品列表滑入视频时自动播放

<!-- 由于商品到色，痛一块商品id存在相同情况 这里需要商品id和颜色一起判断 -->
      <!-- 每个商品传入自定义属性 id和颜色，给视频的元素传入 'hasVideo' 类名 -->
      <div
        class="good_list_item slide1"
        ref="goodListItem"
        :class="{hasVideo: good.showType == 'video'}"
        :dataId="good.id"
        :dataSpe="good.imageSpecification"
        @click="getGoodsDetail(good.id,good.imageSpecification,good,index)"
      >
        <!-- 传图片类展示 -->
        <img :src="good.headImage" v-if="good.showType == 'image' && good.headImage" />
        <div class="video-wrap" v-else>
          <!-- 视频类 wifi下自动播放视频可视区域的第一个视频 -->
          <video
            class="video"
            v-if="isWifi && currentVideoPlayId == good.id+good.imageSpecification"
            :autoplay="true"
            loop
            muted
          >
            <source :src="good.videoUrl" />
          </video>
          <!-- 视频类 其他视频展示图片和视频logo -->
          <div v-else class="video-logo">
            <img :src="good.headImage" />
            <i class="iconfont icon-video_play"></i>
          </div>
        </div>
      </div>

 data () {
   return {
     currentVideoPlayId: '', // 当前展示哪个视频
   }
 },
 computed: {
   isWifi () { // 判断是否是wifi环境
     try {
       let wifi = true
       let ua = window.navigator.userAgent
       let con = window.navigator.connection
       // 如果是微信
       if (/MicroMessenger/.test(ua)) {
         if (ua.indexOf('WIFI') >= 0) {
           wifi = true
         } else {
           wifi = false
         }
         // 如果支持navigator.connection
       } else if (con) {
         let network = con.type
         if (network !== 'wifi' && network !== '2' && network !== 'unknown') {
           wifi = false
         }
       }
       return wifi
     } catch (e) {
       return false
     }
   }
 },
 methods: {
   // debounce lodash的防抖函数
   filterPlayVideo: _.debounce(function () {
     // 获取的是静态NodeList（一个集合，不是数组）
     let videos = document.querySelectorAll('.hasVideo')
     // 让集合转换成一个数组对象
     videos = Array.prototype.slice.call(videos, 0)
     let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
       document.body.scrollTop
     if (!videos.length) return
     // 筛选出 可视区域的视频
     let screenVideo = videos.filter(item => {
       let itemOffsetTop = item.offsetTop
       return (itemOffsetTop > (scrollTop - 270) && itemOffsetTop <= (scrollTop + 270))
     })
     // 筛选出 可视区域第一个视频的自定义属性
     let dataid = screenVideo[0].attributes['dataid'].value
     let dataspe = screenVideo[0].attributes['dataspe'].value
     this.currentVideoPlayId = dataid + dataspe
   }, 200),
 },
 mounted () {
   this.$nextTick(() => {
     this.filterPlayVideo()
   })
   window.addEventListener('scroll', this.filterPlayVideo)
 }