美文网首页
小程序页面滚动到视频位置播放,离开暂停 记录一下

小程序页面滚动到视频位置播放,离开暂停 记录一下

作者: 茗记西岭雪 | 来源:发表于2020-03-21 23:20 被阅读0次

var videoContext = wx.createVideoContext('myVideo') 

    let screenWidth = wx.getSystemInfoSync().windowWidth

    let screenHeight = wx.getSystemInfoSync().windowHeight

    let topBottomPadding = (screenHeight - 170) / 2

    const videoObserve = wx.createIntersectionObserver()

    videoObserve.relativeToViewport({ bottom: -topBottomPadding, top: -topBottomPadding })

      .observe(".bottomVideo", (res) => { // ".bottomVideo" 这个我写的是视频 video 对应都 class (class='bottomVideo')

        let { intersectionRatio } = res

        if (intersectionRatio === 0) {

          //离开视界,因为视窗占比为0,停止播放

          videoContext.pause()

        } else {

          videoContext.play()

        }

      })

相关文章

网友评论

      本文标题:小程序页面滚动到视频位置播放,离开暂停 记录一下

      本文链接:https://www.haomeiwen.com/subject/olmpyhtx.html