微信小程序视频列表用到的组件是 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> <!--文章 标题 -->
<video
autoplay='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，再播放当前点击的current
var 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;
}
版权声明：本文为qq_42897782原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。