微信小程序之video
一．video组件播放时会出现卡顿:加custom-cache=“{{false}}”属性
二．、1.默认显示封面；
2.一个视频播放的时候，其他视频停止播放，并显示封面。
解决问题思路：
1.通过wx:if判断当前视频是否是播放的状态，如果是就显示视频，如果不是就隐藏视频；
2.点击封面的时候，获取到该视频的id，进行判断，如果当前没有视频播放，就把该视频设置为播放的状态；如果当前有视频播放，则停止当前播放的视频，再播放你点击的这个视频。
Wxml:
<view wx:for="{{courseList}}" wx:for-item="course" class='course-pannle-item' wx:for-index="idx">
<view class='video-item'>
<video wx:if='{{idx==playIndex}}'
id='video{{idx}}'
autoplay='{{false}}'
custom-cache="{{false}}"
loop='{{true}}'
enable-play-gesture='{{true}}'
src='{{course.videoUrl}}'
controls="true"
objectFit="cover">
</video>
<image class='video-cover' wx:if='{{idx!=playIndex}}' mode='widthFix' src='{{course.coverUrl}}'></image>
<image class='video-play-btn' wx:if='{{idx!=playIndex}}' mode='widthFix' data-index='{{idx}}' bindtap='videoPlay' src='http://m.qpic.cn/psb?/V11A8E9D06kYXP/PFzhlh1.3MY6Jmrs18X*6HGsSWolXUf0bhY61kYDKvU!/b/dLYAAAAAAAAA&bo=9AFrAQAAAAARF78!&rf=viewer_4'></image>
<text wx:if='{{idx!=playIndex}}' class='video-duration fs-28'>{{course.duration}}</text>
</view>
</view>
<button open-type="share" class="share">微信分享</button>
Js:
//获取应用实例
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
playIndex: null,//用于记录当前播放的视频的索引值
courseList: [{
videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',//视频路径
coverUrl: 'http://m.qpic.cn/psb?/V11A8E9D06kYXP/PFzhlh1.3MY6Jmrs18X*6HGsSWolXUf0bhY61kYDKvU!/b/dLYAAAAAAAAA&bo=9AFrAQAAAAARF78!&rf=viewer_4', //视频封面图
duration: '00:05', //视频时长
loop:'true',
}, {
videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
coverUrl: 'http://m.qpic.cn/psb?/V11A8E9D06kYXP/5G*3gT1SQV5M6ouCnX9xge2PwXcMDjp1b43fKwNXYlo!/b/dFMBAAAAAAAA&bo=9AGAAQAAAAARF1Q!&rf=viewer_4',
duration: '04:45',
loop: 'true',
}]
},
videoPlay: function (e) {
console.log(e)
var curIdx = e.currentTarget.dataset.index;
// 没有播放时播放视频
if (!this.data.playIndex) {
this.setData({
playIndex: curIdx
})
var videoContext = wx.createVideoContext('video' + curIdx) //这里对应的视频id
videoContext.play()
} else { // 有播放时先将prev暂停，再播放当前点击的current
var videoContextPrev = wx.createVideoContext('video' + this.data.playIndex)
if (this.data.playIndex != curIdx) {
videoContextPrev.pause()
}
this.setData({
playIndex: curIdx
})
var videoContextCurrent = wx.createVideoContext('video' + curIdx)
videoContextCurrent.play()
}
},
// onShareAppMessage: function (res) {//分享
// // res.from值是button 或者menu点击右上角
// if (res.form) {
// }
// return {
// title: 'yingpa',
// path: 'pages/home/home',// 路径，传递参数到指定页面。
// imageUrl: 'http://m.qpic.cn/psb?/V11A8E9D06kYXP/PFzhlh1.3MY6Jmrs18X*6HGsSWolXUf0bhY61kYDKvU!/b/dLYAAAAAAAAA&bo=9AFrAQAAAAARF78!&rf=viewer_4'//自定义图片
// }
// }
})
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;
}
1.视频播放的时候，滑动页面视频会一直在那个位置不会跟着滚动条移动。
解决方法：不要将视频放在scroll-view组件里面。官网里面也有讲到。我自己粗心没注意到这个问题。
