小程序单页面多个video 功能实现

最新推荐文章于 2022-10-25 11:27:51 发布

程序员林

最新推荐文章于 2022-10-25 11:27:51 发布

阅读量464

点赞数

分类专栏：小程序 js html 文章标签：小程序

本文链接：https://blog.csdn.net/weixin_40762926/article/details/117991928

版权

小程序同时被 3 个专栏收录

41 篇文章 1 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

实现目标 :播放其中一个视频其他视频关闭播放

效果图:

wxml:

<view class="list-big-box">
    <view class="shipin" wx:for="{{videoList}}" wx:key="index">
      <video src="{{item.video}}" poster="{{item.img}}" class="shipin" bindplay="videoPlay" data-index="{{index}}" id="myVideo{{index}}"></video>
      <view class="shipin-title">{{item.desc}}</view>
    </view>
  </view>

讲解图:

js:

 data:{indexCurrent:null},

  videoPlay(e) {
    var curIdx = e.currentTarget.dataset.index;
    var videoContextPrev = wx.createVideoContext('myVideo' + this.data.indexCurrent);
    if (this.data.indexCurrent != curIdx) {
      videoContextPrev.pause();
      this.setData({
        indexCurrent: curIdx,
      });
    }
  },

讲解图: