index.wxml
<view class="video-wrap">
<swiper class="swiper" vertical='true' easing-function='default' bindchange='swiperchange'>
<block wx:for="{{video_list}}" wx:for-index="idx" wx:key="idx">
<swiper-item>
<view class="video-wrap">
<video wx:if="{{idx==hkindex||idx==hkindex-1||idx==hkindex+1}}" show-center-play-btn="{{false}}" id="myvideo{{idx}}" class="video" src="{{item.videourl}}" loop autoplay="{{idx == autoplay ? true : false}}" show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" enable-play-gesture controls="{{false}}" bindpause="bindpause" bindplay="bindplay">
</video>
</view>
</swiper-item>
</block>
</swiper>
</view>
index.js
// pages/video/index.js
Page({
/**
* 页面的初始数据
*
*/
data: {
autoplay: 0,
video_list: [],
article_id: '',
detail_id: '',
extension_url: '',
hkindex: 0, //滑块index
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
article_id: this.data.article_id = options.article_id,
detail_id: this.data.detail_id = options.detail_id,
});
wx.request({
url: '你的视频详情页接口',
methods: 'GET', // 请求的方式
data: {
article_id: this.data.article_id,
detail_id: this.data.detail_id,
extension_url: this.data.extension_url
},
success: res => {
this.setData({
video_list: this.data.video_list.concat(res.data.child_list)
});
}
});
},
//动态更新当前滑块下标
swiperchange(e) {
this.setData({
hkindex: e.detail.current
})
for (let index = 0; index < this.data.video_list.length; index++) {
if (e.detail.current == index) {
let videoContext = wx.createVideoContext("myvideo" + index + "");
videoContext.play();
} else {
let videoContexta = wx.createVideoContext("myvideo" + index + "")
videoContexta.pause();
// videoContexta.seek(0);
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
index.wxss
page {
width: 100%;
height: 100%;
}
.video-wrap {
width: 100%;
height: 100%;
position: relative;
}
.video-wrap video {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 1;
}
.swiper {
width: 100%;
height: 100%;
}
来源：https://blog.csdn.net/weixin_45791806/article/details/126271114