微信小程序如何停止其他视频播放当前视频

这篇文章主要介绍了微信小程序如何停止其他视频播放当前视频，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

微信小程序停止其他视频播放当前视频，代码如下所示：

<view class="content">  <!--首页-->  <scroll-view class='nav-page'>   <view class="item-box " wx:for="{{videelsi}}" wx:key="item">    <!-- 标题层 -->    <!-- 视频图片层 -->    <view data-id="{{index}}" class="video-image-box"  bindtap="videoPlay">     <view class="video-cover-box">      <image class="video-image" src="{{item.cover}}" mode="aspectFit">      </image>     </view>     <!-- 视频按钮 -->     <image class="video-image-play" src="../image/vidoe.png" mode="scaleToFill"></image>    </view>    <!-- 视频播放层 -->    <video enable-progress-gesture show-play-btn src="{{item.src}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls></video>    <cover-view  class="video-title-box">     <cover-view class='video-title'>{{item.title}}</cover-view>    </cover-view>   </view>  </scroll-view> </view>`

css 样式

.content {  border-top: transparent 1px solid;  box-sizing: border-box;  /* height: 100%; */  width: 100%;  padding: 0 20rpx; } .container{  border-top: transparent 1px solid;  /* box-sizing: border-box; */  /* height: 100%; */  width: 100%; } view {  vertical-align:middle; } .item-box {  width: 100%;  margin-top: 40rpx;  position: relative; } .video-title-box{  height: 70rpx;  width: 100%;  background:rgba(0,0,0,1); opacity:0.2;  position: absolute;  bottom: 10rpx; } .video-title{  text-align: center;  font-size: 30rpx;  line-height: 70rpx; font-weight:400; color:rgba(255,255,255,1); } .item-box{  width: 100%;  display: -webkit-box;   -webkit-box-orient: vertical;  -webkit-line-clamp:2;  overflow: hidden;  text-overflow:ellipsis; } .item-box .video-image-box {  height: 400rpx;  width: 100%;  background-repeat: no-repeat;  background-size: 100% 100%;  background-position-x: 30rpx;  position: relative; } .video-cover-box{  height: 100%;  width: 100%;  text-align: center;  line-height: 0rpx; } .item-box:first-of-type{  margin-top: 0rpx; } .item-box .video-image-box .video-cover-box .video-image {  height: 100%;  width: 100%; } .item-box .video {  height: 300rpx;  width: 100%;  margin: 0 30rpx 0 0;  position: relative; } .item-box .video-image-box .video-image-play {  position: absolute;  width: 80rpx;  height: 80rpx;  top: calc(50% - 40rpx);  left: calc(50% - 40rpx);  z-index: 100; }

js  代码

const app = getApp() Page({  data: {   videoPlay: null,   videelsi: [],  },  onLoad: function () {   wx.hideShareMenu()   this.vidoelist()  },  vidoelist() {   app.api.getData(app.data.https + 'wechat/farm/index').then(res => {    console.log(res)    this.setData({     videelsi: res.data.list    })   })  },  // 点击cover播放，其它视频结束  videoPlay: function (e) {   var _index = e.currentTarget.dataset.id   this.setData({    _index: _index   })   //停止正在播放的视频   var videoContextPrev = wx.createVideoContext(_index + "")   videoContextPrev.stop();   setTimeout(function () {    //将点击视频进行播放    var videoContext = wx.createVideoContext(_index + "")    videoContext.play();   }, 500)  } })

感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序如何停止其他视频播放当前视频”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!