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

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

作者: 茗记西岭雪 | 来源:发表于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