微信小程序滑动指定区域，播放视频video&&实时视频、直播

原理：获取数据渲染完成时（此处很重要，可做延时处理，给页面留下足够渲染时间），就开始获取每个节点距离屏幕顶部的距离，然后排序加入数组。屏幕滚动时遍历数组，节点距离屏幕顶端距离里大于当前滚动距离的节点视频播放，并结束数组遍历。若有遮罩层该节点隐藏遮罩层。
页面css布局

一、播放视频video

<view>
	 <scroll-view class="scroll-view" scroll-y id="scroll-view">
		<view class="box_row_left">
			<view wx:for="{{tableData}}" wx:key="index" wx:for-item="item" class="box_column" wx:if="{{index%2==0}}">
				{{index}}
				<video id="myVideo{{index}}" style="width: 345rpx;height: {{item.height}}rpx;" loop object-fit="fill" src="{{item.url}}"
				  class="video_box">
					<!-- <view class="cover_layer" style="width: 345rpx;height: {{item.height}}rpx;" hidden="{{Index==index?true:false}}"></view> -->
				</video>
			</view>
		</view>
		<view class="box_row_right">
			<view wx:for="{{tableData}}" wx:key="index" wx:for-item="item" class="box_column" wx:if="{{index%2==1}}">
				{{index}}
				<video id="myVideo{{index}}" style="width: 345rpx;height: {{item.height}}rpx;" loop object-fit="fill" src="{{item.url}}"
				  class="video_box">
					<!-- <view class="cover_layer" style="width: 345rpx;height: {{item.height}}rpx;" hidden="{{Index==index?true:false}}"></view> -->
				</video>
			</view>
		</view>
	</scroll-view> 
</view>

var timer = 0;
var topArr=[];
var nowLivePlay = 0;
Page({
	data: {
		Index: 0,
		tableData: [
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "200"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "400"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			}, {
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "320"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "200"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "200"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "400"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "400"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "200"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "400"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			}, {
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "320"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "200"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			},
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "400"
			},
			
			{
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "300"
			}, {
				url: "https://www.runoob.com/try/demo_source/movie.mp4",
				height: "320"
			}
		]
	},
	onReady: function() {
		this.getId()
		let videoContext1 = wx.createVideoContext('myVideo0');
		videoContext1.play();
	},
	getId: function() {
		let top_num=this.data.tableData.length
		for (let i =0; i < top_num; i++) {
			topArr[i] = 0;
			const query = wx.createSelectorQuery()
			query.select('#myVideo' + i).boundingClientRect() //获取节点位置信息的查询请求
			query.selectViewport().scrollOffset(); // 获取页面滑动位置的查询请求
			query.exec((res) => {
				topArr[i] = res[0].top; //节点的上边界坐标
			})
		}
	},
	onPageScroll: function(res) {
		let that = this;
		let top = res.scrollTop;
		topArr = topArr.sort((x, y) => {
			return x - y
		})
		if (timer != 0) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			let Index_num = that.data.Index
			for (let j = 0; j < topArr.length; j++) {
				if (topArr[j] > top) {
					that.setData({
						Index: j
					})
					let string0 = 'myVideo' + nowLivePlay + ''
					let videoContext0 = wx.createVideoContext(string0);
					videoContext0.stop();
					let string1 = 'myVideo' + j + ''
					let videoContext1 = wx.createVideoContext(string1);
					videoContext1.play();
					nowLivePlay = j
					console.log(that.data.Index)
					return;
				}
			}
		}, 500);
	}
})

二、实时视频，直播视频，滑动到指定位置开始播放
实时视频 live-player拉取流量
此处略有不同，其他和video类似

	let string0 = 'myVideo' + nowLivePlay + ''
	let layerContext0 = wx.createLivePlayerContext(string0, that);
	layerContext0.stop();
	let string = 'myVideo' + j + ''
	let layerContext = wx.createLivePlayerContext(string, that);
	layerContext.play();