微信小程序视频列表封面图禁止多个视频同时播放

微信小程序视频列表用到的组件是 video

链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html

先附上效果图（对比效果）

大致思路就是，wx:for="{{ videoLlist }}"下三个view，一个视频video，另一个封面image（客户需求，要可以自定义封面）。
主要控制变量是playIndex，当点击封面时赋予当前点击的e.currentTarget.id，而id="{{ index }}"（index是微信wx:for自带的）。
在video加个wx:if，playIndex == index是判断条件，也就是说点击封面，对应的video的wx:if=true会渲染。
这时最好设置一个延迟来执行videoContext.play()，因为video渲染需要时间，无延迟的话还没渲染完play()就执行了。
其他video的wx:if=false（因为只有要播放的video渲染，而其他video不渲染，所以视频列表不会卡顿）
代码很挫，希望能帮到人

wxml:

<!--pages/activity/historyList/historyList.wxml--><view class='bg_graye' style='width:750rpx;background-size:100%;padding-bottom:50rpx;'><text class='block font20 lh35 fontw'style='letter-spacing:2rpx;padding-left:20rpx;padding-top:25rpx;padding-bottom:20rpx;'>2019-01-22期</text><!-- 视频列表 --><view  class="" wx:for='{{videoList}}' style='width:700rpx;margin:0 auto;margin-bottom:45rpx;'><view class='bg_white radius15' style='width:100%;margin:0 auto;padding-bottom:10rpx;'><text class='block font18 lh30 fontw'style='letter-spacing:2rpx;padding-left:20rpx;padding-top:25rpx;padding-bottom:20rpx;'>{{item.title}}</text>  <!--文章 标题 -->  <videoautoplay='true'show-center-play-btn='false'objectFit='cover'id="index{{index}}" class="videoStyle"  src="{{item.videoUrl}}" wx:if='{{playIndex==index}}'></video>    <!-- 视频-->  <view style="display: {{ playIndex == index ? 'none' : 'block' }};"> <cover-view class="controls pr" id="controls" >   <!--视频 封面图片 -->  <cover-image src="{{item.coverUrl}}" style='width:700rpx;height:453rpx;'/></cover-view><!-- 中间的播放图片标志 --><cover-view class="play pa" style="z-index:200;" id='{{index}}' bindtap="videoPlay"><cover-image bindtap="bindplay" data-id="1" src="{{item.startIcon}}" style="width:160rpx;"/></cover-view></view><text class='block font16 lh20'style='letter-spacing:2rpx;padding-left:20rpx;padding-top:15rpx;padding-right:20rpx;'>{{item.content}}</text><!-- 时间   观看次数 --><view style='padding-top:5rpx;'><text class='block font14 gray9 lh35 fl'style='width:160rpx;margin-left:25rpx;'>{{item.created_time}}</text><text class='block font14 gray9 lh35 fl tr'style='width:300rpx;margin-left:190rpx;'>{{item.watchNumber}}人次观看</text><view class='cl'></view></view></view></view><view style="clear:both"></view>
</view>

js.

// pages/activity/historyList/historyList.js
Page({/*** 页面的初始数据*/data: {playIndex: null,videoList: [],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;var videoList = [{id: "1",title: '第一篇 小美式装修风格案例客餐厅',content: '第一篇 小美式装修风格案例客餐厅小美式效果小美式装修风格案例客餐厅小美式效果',coverUrl: '/images/xiangqing.jpg',startIcon: '/images/icon/video.png',videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',created_time: '2109-11-22',watchNumber: '33333',},{id: "2",title: '第二篇 小美式装修风格案例客餐厅',content: '第二篇 小美式装修风格案例客餐厅小美式效果小美式装修风格案例客餐厅小美式效果',coverUrl: '/images/sc_tj03.jpg',startIcon: '/images/icon/video.png',videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',created_time: '2109-11-26',watchNumber: '44444',},{id: "3",title: '第三篇 小美式装修风格案例客餐厅',content: '第三篇 小美式装修风格案例客餐厅小美式效果小美式装修风格案例客餐厅小美式效果',coverUrl: '/images/yzs-jx.jpg',startIcon: '/images/icon/video.png',videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',created_time: '2109-11-29',watchNumber: '5555555',}];console.log(videoList);//数据显示that.setData({videoList: videoList,})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},// 点击cover播放，其它视频结束videoPlay: function (e) {var id = e.currentTarget.id//console.log(this.data.playIndex, id) // 当前播放与当前点击if (!this.data.playIndex) { // 当前没有正在播放的视频时this.setData({playIndex: id})var videoContext = wx.createVideoContext('index' + id)videoContext.play()} else {                    // 当前有正在播放的视频先将prev暂停到0s，再播放当前点击的currentvar videoContextPrev = wx.createVideoContext('index' + this.data.playIndex)videoContextPrev.seek(0)videoContextPrev.pause()this.setData({playIndex: id})var videoContextCurrent = wx.createVideoContext('index' + this.data.playIndex)videoContextCurrent.play()}},})

一个小程序中有多个视频，当打开一个视频时其它视频停止播放，我是用

videoContextPrev.seek(0)
videoContextPrev.pause()

来伪装结束视频
但这样开多了似乎会卡顿（我并不确定现在开多了会卡顿是否是这个原因造成的）
有没有其他办法真正结束视频，我看有小程序实现这样的功能，视频中断结束再次打开得重新加载（而我的再次打开却立马开始，也就是说视频仅仅只是暂停在0s而已）

wxss:

/* pages/activity/historyList/historyList.wxss */
.font17{font-size: 34rpx;}.radius15{border-radius: 30rpx;}
.radius20{border-radius: 40rpx;}
.radius50{border-radius: 50%;}.border-or{border: 1px solid #f17f2b;}
.border-wh{border: 2px solid #fff;}.font11{font-size: 22rpx;}
.font17{font-size: 34rpx;}.wh25{width: 50rpx;height: 50rpx;}
.wh100{width: 200rpx;height: 200rpx;}.lh20{line-height: 40rpx;}
.lh30{line-height: 60rpx;}
.lh35{line-height: 70rpx;}.p_tb7{padding-top:15rpx;padding-bottom:15rpx;}.bg_rule{background-color: #fe6903;}
.bg_graye{background-color: #eee;}
.bg_iconvip{background-color: #ffd200;}.videoStyle{ width:100%; height:450rpx;}
.controls{ z-index:1; margin-top:5rpx;}
.play{ left:50%;margin-top:-291rpx;margin-left:-80rpx;
}

微信小程序视频列表封面图禁止多个视频同时播放相关推荐

全新动态视频壁纸微信小程序源码下载支持多种分类短视频另外也有静态壁纸
这是一款主打动态视频壁纸的一款微信小程序源码当然啦,里面也是有静态壁纸的其实这款小程序也可以说是短视频小程序都可以该款小程序全采集, 大家应该知道小编之前也发过一款动态壁纸的小程序不过那款是没 ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
新动态视频壁纸微信小程序源码_支持多种分类短视频-也有静态壁纸
这是一款主打动态视频壁纸的一款微信小程序源码,当然啦,里面也是有静态壁纸的. 其实这款小程序也可以说是短视频小程序都可以,该款小程序全采集,另外支持多种流量主!! 下载链接: 新动态视频壁纸微信小程序 ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...

微信小程序视频列表封面图禁止多个视频同时播放

微信小程序视频列表封面图禁止多个视频同时播放相关推荐

最新文章

热门文章

微信小程序 视频列表 封面图 禁止多个视频同时播放

微信小程序 视频列表 封面图 禁止多个视频同时播放相关推荐

最新文章

热门文章

微信小程序视频列表封面图禁止多个视频同时播放

微信小程序视频列表封面图禁止多个视频同时播放相关推荐