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

      
      <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>
          
          <video
            class="video"
            v-if="isWifi && currentVideoPlayId == good.id+good.imageSpecification"
            :autoplay="true"
            loop
            muted
          >
            <source :src="good.videoUrl" />
          video>
          
          <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)
 }