变量定义
data: {
vdata: [], //存放视频url[{name:url,id:id}]
prev_index: null, //上一个index temp
buffer_lenth: 6, //每次缓冲的视频数量
start_temp: 0 //当前起始位置
},
加载视频
可以通过调用接口自己获取视频链接
我用的网址拼接随机数
如果渲染有问题可以尝试异步,用await声明一下
async load_video(start, end) { //加载视频
var r = []
for (let index = start; index < end; index++) {
var e = Math.floor(Math.random() * 8616) //获取随机数视频
let he = "https://api.qqsuu.cn/xjj/" + e + '.mp4'
//let he = 'http://v26-dy.ixigua.com/38c0744f0c46317127ee7d60875f09f6/6511102b/video/tos/cn/tos-cn-ve-15c001-alinc2/76c13e0053e2478abc7e20d0300fdca0/?a=2011&br=3165&bt=3165&btag=e00010000&cd=0%7C0%7C0%7C0&ch=0&cr=0&cs=0&cv=1&dr=0&ds=4&dy_q=1695613451&dy_va_biz_cert=&ft=rkG4k0071gOvGbhBH6xRfiavKYBO5-SIjjdz7tG&l=202309251144113488475587176914C187&mime_type=video_mp4&net=5&qs=0&rc=PDlnO2lpaDY0OjY8ODZpZ0BpM3BqOTc6Zjp0ZzMzNGkzM0BeMDBjLl8xNTMxYmItLy0uYSMtY2NjcjRvX2FgLS1kLWFzcw%3D%3D'
//let he = 'https://v3-dy-o.zjcdn.com/2a6fe5d64911d7eee37a0031c11cd4f2/651123f9/video/tos/cn/tos-cn-ve-15c001-alinc2/5a534b14b75647b48c43402e187494d1/?a=1128&ch=26&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=1844&bt=1844&cs=0&ds=3&ft=kXsR_y7oZNF0PD1oEoYxg9wdC0JTkEeC~&mime_type=video_mp4&qs=0&rc=PDo6ZzU5OTQzPGdmaTk2ZkBpanlyPGc6ZndoZDMzNGkzM0BfMjEwYDMvXzQxMC9hLjRhYSNjcG8xcjRvZG9gLS1kLWFzcw%3D%3D&btag=e000a0000&cc=1f&dy_q=1695618478&l=20230925130758646A37CB33C7B91194EC'
//let he='https://api.qqsuu.cn/xjj/8616.mp4'
let k = {
name: he,
id: index
}
await this.data.vdata.push(k)
}
this.setData({
vdata: this.data.vdata,
})
let videoContext = wx.createVideoContext(this.data.start_temp + '', this) //这里对应的视频id
videoContext.play()
},
swiper
将视频包在swiper组件里,设置纵向滑动(vertical)
将video ,swiper ,swiper-item 样式设置为全屏覆盖
当滑动视频时触发滑动(bindchange=“currentchange”)
wxml如下
<swiper vertical='true' circular="true" style='z-index: 1;' bindchange="currentchange" class="background">
<swiper-item wx:for="{{vdata}}" wx:key="i" current='{{item.id}}' style='z-index: 1;' class="background">
<text class="t">{{item.id}}</text>
<video src="{{item.name}}" id='{{item.id}}' autoplay="{{autoplay}}" controls="false" show-center-play-btn show-mute-btn='true' play-btn-position="center" enable-play-gesture="true" loop="true" style='z-index: 1;' class="background"></video>
</swiper-item>
</swiper>
在切换时
1.处理如果是第一条 对应的(this.data.prev_index)为空
因为滑动才能触发函数
所以相当于划走了第一条视频,则将其暂停
2.其他情况下,暂停上一条,播放当前
3.如果到达缓冲条数,开始缓冲下一组视频
currentchange(e) { //切换事件
if (e.detail.current + 1 == this.data.start_temp + this.data.buffer_lenth) {
//加载下一组视频
this.setData({
start_temp: this.data.start_temp + this.data.buffer_lenth
})
this.load_video(this.data.start_temp, this.data.start_temp + this.data.buffer_lenth)
}
console.log('当前curr swiperid', e.detail.current);
let curIdx = e.detail.current;
//播放当前
let thisplay = wx.createVideoContext(curIdx + '', this)
if (thisplay.play()) {
console.log('play', curId);
}
if (!this.data.prev_index) { //判断是否第一条,自动播放,滑动后暂停
let kk = wx.createVideoContext(0 + '', this)
this.setData({
prev_index: curIdx
})
if (kk.pause()) {
console.log('pause', curIdx);
}
} else {
//其他情况下暂停上一个(this.data.prev_index),播放当前(curId)
let videoContextPrev = wx.createVideoContext(this.data.prev_index + '', this) //this是在自定义组件下,当前组件实例的this,以操作组件内 video 组件(在自定义组件中药加上this,如果是普通页面即不需要加)
if (this.data.prev_index != curIdx) {
if (videoContextPrev.pause())
console.log("else-pause", this.data.prev_index);
this.setData({
prev_index: curIdx
})
}
}
},
onLoad(options) {
this.load_video(this.data.start_temp, this.data.buffer_lenth + this.data.start_temp)
},
wxss
.background {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}