1、页面部分代码
<view class="new-list" wx:for="{{videoList}}" wx:for-index="i" wx:for-item="item" wx:key="i">
<view class="video-wrap">
<!-- 视频展示海报,先不去显示video ,通过点击海报,显示当前的video标签,播放当前的视频,这样做的目的是节流,一开始加载很多video 标签的话会加载很慢,有点卡顿,所以点击哪个就是显示哪个video标签,再去加载当前标签视频资源 -->
<view
class="video-wrap-img"
wx:if="{{!item['isPlay']}}"
data-id="id_{{item.data.id}}"
data-index="{{i}}"
bindtap="playVideo"
>
<!-- 海报 -->
<image
class="poster"
src="{{item.data.cover.feed}}">
</image>
</view>
<!-- 视频 -->
<video class="video" wx:if="{{item['isPlay']}}"
show-play-btn="{{true}}"
controls="{{true}}"
autoplay="{{true}}"
duration="{{item.data.duration}}"
bindplay="handlePlay"
src="{{item.data.playUrl}}"
id="id_{{item.data.id}}"></video>
</view>
</view>
js部分代码
// pages/index/hotVideo/hotVideo.js
Page({
/**
* 页面的初始数据
*/
data: {
videoList: [], // 通过接口获取数据
},
// 点击播放视频控制 ,多个视频点击播放的时候,如果不做处理,点击下个视频播放的时候,上一个也在播放,这很明显是不行的,每次只能有一个视频在播放
handlePlay(event) {
// 获取标签id
let vid = event.currentTarget.id;
//关闭上一个播放的视频
this.vid !== vid && this.videoContext && this.videoContext.stop();
this.vid = vid;
//创建控制视频标签的实例对象
this.videoContext = wx.createVideoContext(vid);
},
// 点击播放视频
playVideo(e){
let index = e.currentTarget.dataset.index;
// 点击获取当前数据的索引,给当前数据加一个字段,页面上根据这个字段,显示当前点击的视频的video
this.data.videoList[index]['isPlay'] = true;
// 数据更改后要从新赋值, 页面才会变好
this.setData({
videoList: this.data.videoList
})
}
})
主要代码部分就是这些,如果有不明白的请留言,互相讨论学习。
(完结)
下面是我的小程序实现的效果,可以扫码看看