<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 () {
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
}
} else if (con) {
let network = con.type
if (network !== 'wifi' && network !== '2' && network !== 'unknown') {
wifi = false
}
}
return wifi
} catch (e) {
return false
}
}
},
methods: {
filterPlayVideo: _.debounce(function () {
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)
}
Processed:
0.010, SQL:
9
