小程序播放当前视频关闭其他视频

快来打我* 2022-04-13 12:15 170阅读 0赞

<view wx:for="{
       {courseList}}" wx:for-item="course" class='course-pannle-item' wx:for-index="idx">
      <view class='video-item'>
        <video wx:if='{
       {idx==playIndex}}' id='video{
       {idx}}' autoplay='{
       {true}}' show-center-play-btn="{
       {false}}" src='{
       {course.videoUrl}}' controls="true" objectFit="cover">
        </video>
        <image class='video-cover' wx:if='{
       {idx!=playIndex}}' mode='widthFix' src='{
       {course.coverUrl}}'></image>
        <image class='video-play-btn' wx:if='{
       {idx!=playIndex}}' mode='widthFix' data-index='{
       {idx}}' bindtap='videoPlay' src='/images/img11.png'></image>
        <text wx:if='{
       {idx!=playIndex}}' class='video-duration fs-28'>{
       {course.duration}}</text>
      </view>
    </view>

.video-item{
      position: relative;
      width: 100%;
      height: 420rpx;
    }
    video{
      width: 100%;
      height: 100%;
    }
    .video-cover{
      position: absolute;
      left: 0;
      top: 0
    }
    .video-play-btn{
      position: absolute;
      width: 120rpx;
      height: 120rpx;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto
    }
    .video-duration{
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #fff;
    }

var app = getApp();
    
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        playIndex: null,//用于记录当前播放的视频的索引值
        courseList: [{
          videoUrl: 'xxx.mp4',//视频路径
          coverUrl: '/images/img2.jpg', //视频封面图
          duration: '03:00', //视频时长
        }, {
            videoUrl: 'xxx.mp4',
            coverUrl: '/images/img3.png',
          duration: '04:45',
        }]
      },
      videoPlay: function (e) {
        var curIdx = e.currentTarget.dataset.index;
        // 没有播放时播放视频
        if (!this.data.playIndex) {
          this.setData({
            playIndex: curIdx
          })
          var videoContext = wx.createVideoContext('video' + curIdx) //这里对应的视频id
          videoContext.play()
        } else { // 有播放时先将prev暂停，再播放当前点击的current
          var videoContextPrev = wx.createVideoContext('video' + this.data.playIndex)
          if (this.data.playIndex != curIdx) {
            videoContextPrev.pause()
          }
          this.setData({
            playIndex: curIdx
          })
          var videoContextCurrent = wx.createVideoContext('video' + curIdx)
          videoContextCurrent.play()
        }
      }
    })

大佬博客地址：[http://www.cnblogs.com/sese/p/9353864.html][http_www.cnblogs.com_sese_p_9353864.html]

[http_www.cnblogs.com_sese_p_9353864.html]: http://www.cnblogs.com/sese/p/9353864.html