The general idea is that wx:for="{{ list }}" has two views, one video and the other cover image (customer needs to customize the cover).
The main control variable is playIndex, which is given to e.currentTarget.id of the current click when the cover is clicked, and id="{{ index }}" (index comes with WeChat wx:for).
Add a wx:if to the video, playIndex == index is the judgment condition, that is to say, if you click on the cover, the wx:if=true of the corresponding video will be rendered.
At this time, it is best to set a delay to execute videoContext.play(), because video rendering takes time, and if there is no delay, play() will be executed before rendering.
WXML
<view wx:for="{{list}}">
<view>
<video id="index{{index}}" src="{{item.video_url}}" wx:if="{{playIndex==index}}"></video>
</view>
<view id="{{index}}" class="cover" style="display: {{playIndex==index?'none':'block'}};" bindtap="videoPlay">
<image class="coverImg" src="{{item.poster}}" mode="scaleToFill">
<image class="playImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524569209313&di=ed6fbf799d057b1e2b4047276d35fc76&imgtype=0&src=http%3A%2F%2Fpic.orsoon.com%2Fuploads%2Fallimg%2F1601%2F24-1601021621070-L.png" mode="scaleToFill"></image>
</image>
</view>
</view>
WXSS
video{width: 100%;}
.coverImg{position:relative;width: 100%;}
.playImg{position: absolute;top: 50%;left: 50%;width: 64rpx;height: 64rpx;}
JS
// pages/video/video.js
Page({
/**
* Initial data of the page
*/
data: {
list: [
{ isPlaying: false, type: 1, title: "历史“", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
{ isPlaying: false, title: "新疆", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
{ isPlaying: false, title: "North Korea", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2.Fi0.hdslb com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "Sake Fu kill immediately send water cube near Soraka, Salianfa Kejilin Province Development Salon Oriental Technology Osfa left home", video_url: 'http://tbm .alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
{ isPlaying: false, title: "Meeting", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2.Fi0.hdslb com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "Sake Fu kill immediately send water cube near Soraka, Salianfa Kejilin Province Development Salon Oriental Technology Osfa left home", video_url: 'http://tbm .alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
{ isPlaying: false, title: "Million Miles", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi.hdslb com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "Sake Fu kill immediately send water cube near Soraka, Salianfa Kejilin Province Development Salon Oriental Technology Osfa left home", video_url: 'http://tbm .alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
{ isPlaying: false, title: "Autonomous Region", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2.Fi0.hdslb com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "Sake Fu kill immediately send water cube near Soraka, Salianfa Kejilin Province Development Salon Oriental Technology Osfa left home", video_url: 'http://tbm .alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },
]
},
/**
* Life cycle function--listen to page load
*/
onLoad: function (options) {
},
// Click cover to play, other videos end
videoPlay: function (e) {
var length = this.data.list.length
var id = e.currentTarget.id
if (!this.data.playIndex) { // play video when not playing
this.setData({
playIndex: id
})
var videoContext = wx.createVideoContext(['index', id].join(''))
videoContext.play()
} else { // Pause prev to 0s when there is playback, and then play the currently clicked current
var videoContextPrev = wx.createVideoContext(['index', this.data.playIndex].join(''))
videoContextPrev.seek(0)
videoContextPrev.pause()
this.setData({
playIndex: id
})
var videoContextCurrent = wx.createVideoContext(['index', this.data.playIndex].join(''))
videoContextCurrent.play()
}
}
})