reader/component/video-swiper/index.wxml

<view class="container">
  <swiper 
    class="video-swiper" 
    circular="{{circular}}"
    next-margin="{{nextMargin}}" 
    easing-function="{{easingFunction}}" 
    vertical 
    current="1"
    duration="{{duration}}" 
    bindanimationfinish="animationfinish">
    <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
    <swiper-item class="swiper_item" wx:for="{{curQueue}}" wx:key="*this">
      <view class="head_box">
        <view class="user_box">
          <image class="avatar" lazy-load="true" src="{{item.avatar}}" />
          <view class="user_right">
            <view class="nickname">{{item.nickName}}</view>
          <view class="time">
            <text>发布时间:</text>
            <text>{{item.time}}</text>
          </view>
          </view>
            
        </view>
        <view class="more_btn">
            <view class="more_item"></view>
            <view class="more_item"></view>
            <view class="more_item"></view>
        </view>
          
      </view>
      <video 
        id="video_{{index}}" 
        class="video_item" 
        loop="{{loop}}" 
        enable-play-gesture 
        enable-progress-gesture 
        show-center-play-btn="{{false}}"
        controls="{{true}}"
        src="{{item.url}}" 
        data-id="{{item.id}}"
        object-fit="contain"
        data-index="{{index}}"
        bindplay="onPlay"
        bindpause="onPause"
        bindended="onEnded"
        binderror="onError"
        bindtimeupdate="onTimeUpdate"
        bindwaiting="onWaiting"
        bindprogress="onProgress"
        bindloadedmetadata="onLoadedMetaData"
      >
      </video>
      <view class="video_title">
        <text>
          {{item.title}}
        </text>
          
      </view>
        
      <view class="foot_box"> 
        <view class="foot_left">
          <view class="btn collect_btn">
              <image class="collect_btn_icon" src="../../static/index/star.png" lazy-load="true" />
              <text>收藏</text>
          </view>
          <view class="btn share_btn">
              <image class="share_btn_icon" src="../../static/index/share.png" lazy-load="true" />
              <text>分享</text>
          </view>
        </view>
        <view class="foot_right">
          <view class="btn flower_btn">
              <image class="flower_btn_icon" src="../../static/index/flower.png" lazy-load="true" />
              <text>{{item.likes}}</text>
          </view>
          <view class="btn comment_btn">
              <image class="comment_btn_icon" src="../../static/index/comment.png" lazy-load="true" />
              <text>{{item.likes}}</text>
          </view>
        </view>
            
      </view>
      <view class="btn_wrapper">
        <view class="reading_btn">
          <image src="../../static/index/star.png" />
          <text>我要配音</text>
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>