制作一个类似抖音视频播放的功能,在滑动视频之后上一个视频还是在播放,无法暂停,使用的是wepy 框架
<swiper
class="video-swiper"
vertical
current="0"
bindanimationfinish="animationfinish"
>
<swiper-item v-for="(item, index) in videoList" :key="index">
<video
id="video{{index}}"
class="video_item"
enable-play-gesture
enable-progress-gesture
show-center-play-btn="{{true}}"
controls="{{true}}"
src="{{item.url_mp4}}"
data-id="{{item.hid}}"
object-fit="{{item.objectFit || 'cover'}}"
data-index="{{index}}"
custom-cache="{{false}}"
bindplay="onPlay"
bindpause="onPause"
bindended="onEnded"
binderror="onError"
bindtimeupdate="onTimeUpdate"
bindwaiting="onWaiting"
bindprogress="onProgress"
bindloadedmetadata="onLoadedMetaData"
>
</video>
</swiper-item>
// JS
wepy.component({
props: {
videoList: {}
},
data: {
_videoContexts:[],
currentIndex: 0
},
created() {
console.log('this.videoList',this.videoList,this.props)
this._videoContexts=[]
},
watch:{
videoList(){
this._videoContexts=[]
for (let i = 0; i < this.videoList.length; i++) {
this._videoContexts.push(wx.createVideoContext('video'+i, this))
}
}
},
methods: {
onPlay(){},
onPause(){
console.log('触发暂停时间-----');
},
onEnded(){},
onError(){},
onTimeUpdate(){},
onWaiting(){},
onProgress(){},
onLoadedMetaData(){},
animationfinish(e){
let current = e.$wx.detail.current
const _this = this;
this.$emit('changeComment', current);
this.currentIndex = current;
this._videoContexts.forEach((ctx, index)=>{
if( index == current + 1 || index == current - 1){
//这里执行无效
ctx.pause();
}else{
ctx.play()
}
});
}
}
为什么不在swiper里写bindchange
用bindchange来判断就能知道视频是不是切换了 切换了就暂停啊
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
bindanimationfinish="animationfinish"