视频进入可视区自动播放

videoItem.vue // 视频组件

<template>
  <div :style="{'backgroundColor': runColor}" style="height:200px;margin-bottom: 20px;color:#fff;">
    这是组件{{runId}}
    <video width="320" height="200" controls ref="videoRef">
      <source src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4" type="video/mp4">
      <source src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4" type="video/ogg">
      您的浏览器不支持 HTML5 video 标签。
    </video>
  </div>
</template>
<script>
export default {
  props: {
    runId: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      runColor: '#0085d0'
    }
  },
  methods: {
    getScreen() {
      //判断是不是移动端
      if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        return true
      }
      return false
    },
    playFn() {
      const _this = this;
      if (this.getScreen()) {
        // 微信中不能自动播放，暂停，该方法已经失效
         document.addEventListener("WeixinJSBridgeReady", function () { 
          _this.$refs.videoRef.play(); 
        }, false); 
      } else {
        this.$refs.videoRef.play()
      }
    },
    pauseFn() {
      if (this.getScreen()) {
         document.addEventListener("WeixinJSBridgeReady", function () { 
          this.$refs.videoRef.pause(); 
        }, false); 
      } else {
        this.$refs.videoRef.pause()
      }
    }
  }
}
</script>

videoShow.vue

<template>
  <div class="testBox">
    <div style="height:900px;background-color:#ddd;">占用区</div>
    <video-item v-for="item in 5" :key="item" :runId="item" ref="runRef"></video-item>
  </div>
</template>
<script>
import videoItem from './videoItem'
export default {
  components: {
    videoItem
  },
  data() {
    return {
    }
  },
  methods: {
    debounce(fn, delay) {
      let time = false //第一次进来time为false，走else
      return function(){
        if (time) {
            clearTimeout(time) //滚动条在不断的滚动，我们不断的清除定时器（重新初始化定时器，在重新设置定时器）
            time = setTimeout(fn, delay) //又重新设置定时器，
        } else {
            time = setTimeout(fn, delay) //进来第一次先进入这里，然后time被赋值 != false,如果滚动条在继续滚动，接着马上进入time == true中
        }
      }
    },
    scrollHandle() {
      const runInArr = []
      const runRefArr = this.$refs.runRef;
      runRefArr.forEach((item, index)=> {
        // 关闭所有视频
        item.pauseFn()
        const offset = item.$el.getBoundingClientRect()
        const offsetTop = offset.top + 200;
        const offsetBottom = offset.bottom;
        if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
          console.log('进入可视区域');
          runInArr.push(item.runId)
        } else {
          if (runInArr.indexOf(item.runId) > -1) {
            console.log('移出可视区域');
            runInArr.splice(index, 1)
          }
        }
      })
      const lastId = runInArr[runInArr.length-1]
      const currentVideo = runRefArr.find(_item => {
        return _item.runId === lastId
      })
      if (currentVideo) {
        console.log(lastId)
        currentVideo.playFn()
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.debounce(this.scrollHandle,300), true)
  }
}
</script>
<style lang="scss">
  body {
    height: 100%;
  }
  .testBox {
    height: 100%;
    overflow: auto;
  }
</style>