微信小程序(六)视频组件的应用--播放下一个关闭上一个
仔细看文档
https://developers.weixin.qq.com/miniprogram/dev/component/video.html 视频组件video
https://developers.weixin.qq.com/miniprogram/dev/api/VideoContext.html 视频原生API
直接上代码可执行
wxml
<view wx:for="{{courseList}}" wx:for-index="index" wx:for-item="course" class='course-pannle-item' >
<view class='video-item'>
<video id='{{index}}' show-center-play-btn="false" src='{{course.videoUrl}}' controls="true" objectFit="cover" bindtap='videoPlay'>
</video>
</view>
wxss
.video-item{ position: relative;width: 100%;height: 420rpx;}
video{width: 100%;height: 100%}
.video-cover{position: absolute;left: 0; top: 0}
.video-play-btn{position: absolute;width: 120rpx;height: 120rpx left: 0;right: 0;top: 0;bottom: 0;margin: auto}
.video-duration{ position: absolute; right: 10px; bottom: 10px;color: #fff;}
js
Page({
data: {
playIndex: null,//用于记录当前播放的视频的索引值
courseList: [{
videoUrl: 'xxxx',//视频路径
}, {
videoUrl: 'xxx',
}],
},
videoPlay: function (e) {
console.log(e)
var curIdx = e.target.id;
console.log(curIdx)
// 没有播放时播放视频
if (!this.data.playIndex) {
this.setData({
playIndex: curIdx
})
var videoContext = wx.createVideoContext(curIdx) //这里对应的视频id
videoContext.play()
//进入全屏模拟器不可以手机可以
// videoContext.requestFullScreen({ direction: 0 })
} else {
// 有播放时先将prev暂停,再播放当前点击的current
var videoContextPrev = wx.createVideoContext(this.data.playIndex)
if (this.data.playIndex != curIdx) {
//跳转到初始位置进行暂停
videoContextPrev.seek(0)
videoContextPrev.pause()
}
this.setData({
playIndex: curIdx
})
var videoContextCurrent = wx.createVideoContext(curIdx)
//全屏模式播放
videoContextCurrent.play()
//进入全屏模拟器不可以手机可以
// videoContextCurrent.requestFullScreen({ direction: 0 })
}
}
})