小程序视频列表中播放和停止视频的示例代码

效果类似于一个视频小程序，也就是一个视频列表，然后每个视频都覆盖一个视频的封面图片。点击封面图片的播放按钮播放视频。点击其他视频时，停止播放当前视频，播放点击的视频。大概是这样的：

一段视频

代码优先：

页面结构

block wx : for=' { { video list } } ' view class=' video-item ' view class=' wrapper ' video class=' video-video ' wx : if=' { { index==video index } } ' id=' video { { index } } ' autoplay=' { { true } } ' show-center-play-BTN=' { { false } } ' src=' { { item . resource _ add } } '/video image class=' video-video 2 ' wx :0=video index } } ' mode=' aspectFill ' src=' { { item . coverimg } } '/image image class=' video play ' wx : if=' { { index！=video index } } ' data-index=' { { index } } ' bind tap=' video play ' src='/images/icon/play . png '/image/view view class=' video-name ' { { item . title } }/view view class=' video-desc ' style=' { { item . upstatus？ ' display :-web kit-box ' } } ' { { item . description } }/view view class=' video-bottom ' view class=' video-BTN ' data-index=' { { index } } ' bind tap=' upDown ' image hidden=' { { item . upstatus } } ' src='/images/icon/slide . png '/image hidden=' { {！item . UPstatus } } ' src='/images/icon/up . png '/image text { {！项目.北部？展开“:”并折叠“} } }/} }/text/view/view/view/blockjs

videoPlay(事件){ var index=video.getDataSet(事件，‘index’)；if(！This.data.videoIndex) {//在视频不播放This . set data({ video index : index })var video context=wx . createvideo context(' video ' index)video context . Play()} else { var video context prev=wx . createvideo context(' video ' This . data . video index)video context prev . stop()This。setdata({ video index : index })var video context current=wx。createvideocontext ('video '索引)videocontextcurrent。play ()}}，在页面布局上，我们将视频的封面图片定位在视频容器中，并将播放按钮定位在级别最高的视频容器中。设置show-center-play-btn为flase，因为要求是点击封面图片上的播放按钮开始播放视频。循环绑定数据时，将循环索引拼入视频的ID，将循环索引作为属性绑定到播放按钮。

在JS中，首先我们设置videoIndex来表示当前播放的视频在列表中的位置，其初始值为null。

视频的播放和暂停

当发生点击事件时，首先获取被点击的索引，然后判断videoIndex的值：

如果videoIndex值为null，则表示这是第一次点击，将索引绑定到videoIndex，然后通过var video context=wx . createvideo context(' video ' index)获取当前点击的视频，通过videoContext.play()播放视频。如果videoIndex的值不为空，则表示这不是第一次点击。我们应该首先停止播放视频，然后播放点击的视频。此时，videoIndex的值表示正在播放的视频在列表中的位置。我们通过var video contextprev=wx . createvideo context(' video ' this . data . video index)获取正在播放的视频上下文，然后通过videoContextPrev.stop()停止它。最后，我们将获得的索引值重新绑定到videoIndex上指示被点击视频的序列号，然后重复第一步。封面图像处理

封面图片和封面图片上的播放按钮我们已经处理好了，就用wx:if或者隐藏在微信上。当videoIndex等于Index时，表示播放视频，显示播放视频，隐藏封面图片和播放按钮。

一个小坑

首先考虑到性能，wx:if在加载页面时不呈现数据，在点击时频繁呈现数据，影响性能。因此采用隐藏的方法，用隐藏的方法处理封面图片和播放按钮没有问题。处理视频时，有时视频不会播放，会显示中间的播放按钮，所以采用了wx3360 if，这样在页面开始渲染时不会渲染视频，而是点击后进行渲染。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。