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)
 }