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

文章索引

一、video列表：

<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()

})

}

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

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()

}

})