uniapp video视频列表：播放当前视频时关闭其他视频，页面滑动不在可视区域时自动关闭当前视频

文章索引

一、video列表：

<view
  v-for="(item, index) in data.article"
  :key="index"
  class="bg-white flex-col p-20 mb-20"
>
  <view class="flex-center">
    <video
      :id="'video' + item.id"
      :src="item.content"
      :poster="item.cover"
      controls
      vslide-gesture-in-fullscreen
      :title="item.title"
      class="w-100"
      show-mute-btn
      enable-play-gesture
      @play="onPlay(item)"
    ></video>
  </view>
  <view class="pv-20"> {{ item.title }} </view>
  <view class="text-secondary fs-sm">已有{{ item.view_count }}人学习</view>
</view>

<view

v-for="(item, index) in data.article"

:key="index"

class="bg-white flex-col p-20 mb-20"

<video

:id="'video' + item.id"

:src="item.content"

:poster="item.cover"

controls

vslide-gesture-in-fullscreen

:title="item.title"

class="w-100"

show-mute-btn

enable-play-gesture

@play="onPlay(item)"

></video>

</view>

<view class="pv-20"> {{ item.title }} </view>

<view class="text-secondary fs-sm">已有{{ item.view_count }}人学习</view>

</view>

二、播放当前视频时关闭其他视频：

  const onPlay = (item: ApiType.CourseData[number]) => {
    data.currentVideoItem = item
    data.article.map(currentItem => {
      item.id !== currentItem.id && uni.createVideoContext('video' + currentItem.id).pause()
    })
  }

const onPlay = (item: ApiType.CourseData[number]) => {

data.currentVideoItem = item

data.article.map(currentItem => {

item.id !== currentItem.id && uni.createVideoContext('video' + currentItem.id).pause()

})

}

三、页面滑动不在可视区域时自动关闭当前视频：

  let data = reactive({
    currentVideoItem: {} as ApiType.CourseData[number],
    safeAreaHeight: 0
  })

  uni.getSystemInfo({
    success: res => {
      data.safeAreaHeight = res.safeArea?.height as number
    }
  })

  onPageScroll(e => {
    if (data.currentVideoItem.id && data.type === Enums.Course.video) {
      const query = uni.createSelectorQuery()
      query
        .select('#video' + data.currentVideoItem.id)
        .boundingClientRect((res: any) => {
          // console.log('得到布局位置信息' + JSON.stringify(res))
          // console.log('节点离页面顶部的距离为' + res.top)

          if (res.top < -110 || res.top > data.safeAreaHeight) {
            uni.createVideoContext('video' + data.currentVideoItem.id).pause()
          }
        })
        .exec()
    }
  })

let data = reactive({

currentVideoItem: {} as ApiType.CourseData[number],

safeAreaHeight: 0

})

uni.getSystemInfo({

success: res => {

data.safeAreaHeight = res.safeArea?.height as number

}

})

onPageScroll(e => {

if (data.currentVideoItem.id && data.type === Enums.Course.video) {

const query = uni.createSelectorQuery()

query

.select('#video' + data.currentVideoItem.id)

.boundingClientRect((res: any) => {

// console.log('得到布局位置信息' + JSON.stringify(res))

// console.log('节点离页面顶部的距离为' + res.top)

if (res.top < -110 || res.top > data.safeAreaHeight) {

uni.createVideoContext('video' + data.currentVideoItem.id).pause()

}

})

.exec()

}

})