reader/component/video-swiper/index.wxml

<view class="swiper_container">
  <swiper wx:if="{{isSwiper}}" class="video-swiper" circular="{{circular}}" easing-function="{{easingFunction}}" vertical current="0" duration="{{duration}}" next-margin="{{nextMargin}}" bindanimationfinish="animationfinish">
    <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
    <swiper-item class="swiper_item" wx:for="{{curQueue}}" data-id="{{item.id}}" wx:key="id">
      <view class="head_box">
        <image class="tag_icon" wx:if="{{item.hasTag}}" src="{{item.tagUrl}}" />
        <view class="user_box" catchtap="{{ifHeadTap ? 'headTap' : null}}" data-uid="{{item.uid}}">
          <image class="avatar" lazy-load="true" src="{{item.avatar}}" />
          <image class="avatar_fans" src="../../static/index/add_follow.png" />
          <view class="user_right">
            <view class="nickname">{{item.nickName}}</view>
            <image class="efun_tag" src="../../static/index/efun_tag.png" wx:if="{{item.isEfun}}"></image>
          </view>
        </view>
        <view wx:if="{{!item.showMyBtn}}" class="time">
          <text>发布时间：{{item.time}}</text>
        </view>
        <view wx:if="{{item.showMyBtn}}" class="my_btn">
          <view catchtap="delete" data-id="{{item.id}}">
            <image src="../../static/index/delete.png" />
            <text>删除</text>
          </view>
          <view catchtap="hide" data-status="{{item.status}}" data-id="{{item.id}}">
            <image src="{{item.status==='NORMAL'? '../../static/index/show_icon.png': '../../static/index/hide_icon.png'}}" />
            <text>{{item.status==='NORMAL'? '隐藏': '展示'}}</text>
          </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}}" object-fit="contain" data-index="{{index}}" data-id="{{item.id}}" bindplay="onPlay" bindended="onEnded">
        <!-- 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="video_btn collect_btn" catchtap="collectTap" data-index="{{index}}" data-id="{{item.id}}" data-type="{{item.type}}">
            <image class="collect_btn_icon" src="{{item.isFavorite ? '../../static/index/star_colored.png' : '../../static/index/star.png'}}" />
            <text>收藏</text>
          </view>
          <view class="video_btn share_btn" bindtap="openShare" data-index="{{index}}" data-id="{{item.id}}" data-avatar="{{item.avatar}}" data-author="{{item.nickName}}" data-uid="{{item.uid}}" data-img="{{item.img}}" data-title="{{item.title}}" data-type="{{item.type}}">
            <image class="share_btn_icon" src="../../static/index/share.png" lazy-load="true" />
            <text>分享</text>
          </view>
        </view>
        <view class="foot_right">
          <view class="video_btn flower_btn" catchtap="{{item.isLike ?  null : 'likeTap'}}" data-index="{{index}}" data-id="{{item.id}}" data-islike="{{item.isLike}}">
            <image class="flower_btn_icon" src="{{item.isLike ? '../../static/index/heart_colored.png' : '../../static/index/heart.png'}}" />
            <text>{{item.likes}}</text>
          </view>
          <view class="video_btn comment_btn" catchtap="openComment" data-id="{{item.id}}">
            <image class="comment_btn_icon" src="../../static/index/comment.png" lazy-load="true" />
            <text>{{item.commentAmount}}</text>
          </view>
        </view>
      </view>
      <view class="btn_wrapper" catchtap="goToReading" data-id="{{item.classId}}">
        <view class="reading_btn">
          <image src="../../static/index/microphone.png" />
          <text>我要配音</text>
        </view>
      </view>
    </swiper-item>
  </swiper>
  <!-- // 非swiper -->
  <view wx:if="{{!isSwiper}}" class="swiper_item no_swiper" wx:for="{{sonVideoList}}" data-id="{{item.id}}" wx:key="id">
    <view class="head_box">
      <image class="tag_icon" wx:if="{{item.hasTag}}" src="{{item.tagUrl}}" />
      <view class="user_box" catchtap="{{ifHeadTap ? 'headTap' : null}}" data-uid="{{item.uid}}">
        <image class="avatar" lazy-load="true" src="{{item.avatar}}" />
        <image class="avatar_fans" wx:if="{{!item.isFans}}" src="../../static/index/add_follow.png" />
        <view class="user_right">
          <view class="nickname">{{item.nickName}}</view>
          <image class="efun_tag" src="../../static/index/efun_tag.png" wx:if="{{item.isEfun}}"></image>
        </view>
      </view>
      <!-- <view wx:if="{{!item.showMyBtn}}" class="time">
        <text>发布时间：{{item.time}}</text>
      </view> -->
      <view wx:if="{{!item.showMyBtn && item.type != 'EXAMPLE'}}" class="time">
        <text>发布时间：{{item.time}}</text>
      </view>
      <view wx:if="{{item.showMyBtn && !item.ifCheck}}" class="my_btn">
        <view class="delete" catchtap="download" data-url="{{item.markPath ? item.markPath : '' }}" data-id="{{item.id}}">
          <image class="download_image" src="../../static/index/down.png" />
          <text class="delete_text">下载</text>
        </view>
        <view class="delete" catchtap="delete" data-id="{{item.id}}">
          <image class="delete_image" src="../../static/index/delete.png" />
          <text class="delete_text">删除</text>
        </view>
        <view class="hide" catchtap="hide" data-status="{{item.status}}" data-id="{{item.id}}">
          <!-- <image class="hide_image" src="{{item.status==='NORMAL'? '../../static/index/hide_icon.png': '../../static/index/show_icon.png'}}" /> -->
          <image class="hide_image" src="{{item.status==='NORMAL'? '../../static/index/unlock.png': '../../static/index/lock.png'}}" />
          <text class="hide_text">{{item.status==='NORMAL'? '公开': '私密'}}</text>
        </view>
      </view>
      <!-- <view wx:if="{{item.showMyBtn && !item.ifCheck}}" class="my_btn">
        <view class="delete" catchtap="delete" data-id="{{item.id}}">
          <image class="delete_image" src="../../static/index/delete.png" />
          <text class="delete_text">删除</text>
        </view>
        <view class="hide" catchtap="hide" data-status="{{item.status}}" data-id="{{item.id}}">
          <image class="hide_image" src="{{item.status==='NORMAL'? '../../static/index/unlock.png': '../../static/index/lock.png'}}" />
          <text class="hide_text">{{item.status==='NORMAL'? '公开': '仅自己可见'}}</text>
        </view>
      </view> -->
    </view>
    <view class="video_place" wx:if="{{!item.videoShow}}" catchtap="{{item.ifCheck ? null : 'showVideo'}}" data-index="{{index}}">
      <image class="place_img" src="{{item.coverImg}}" />
      <image class="play_btn" src="../../static/image/play-btn.png" />
      <view class="video_item_dialog" wx:if="{{item.ifCheck}}">
        <image class="video_item_dialog_img" src="../../static/index/checking.png" mode="aspectFit|aspectFill|widthFix" />
      </view>
    </view>
    <video wx:if="{{item.videoShow}}" id="video_{{index}}" class="video_item" loop="{{loop}}" show-center-play-btn="{{!item.ifCheck ? true : false}}" controls="{{!item.ifCheck ? true : false}}" src="{{item.url ? item.url : '' }}" autoplay="{{true}}" object-fit="contain" data-index="{{index}}" data-id="{{item.id}}" bindplay="onPlayList" bindended="onEndedList" binderror="onError">
      <!-- show-center-play-btn="{{!item.ifCheck ? true : false}}" -->
      <!-- show-center-play-btn="{{!item.ifCheck ? true : false}}" -->
      <!-- show-center-play-btn="{{!item.ifCheck ? true : false}}" -->
      <!-- 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" wx:if="{{!item.ifCheck}}">
      <view class="foot_left">
        <view class="video_btn collect_btn" catchtap="collectTap" data-index="{{index}}" data-id="{{item.id}}" data-type="{{item.type}}">
          <image class="collect_btn_icon" src="{{item.isFavorite ? '../../static/index/star_colored.png' : '../../static/index/star.png'}}" />
          <text>{{item.favoritesAmount === 0 ? '收藏' : item.favoritesAmount}}</text>
        </view>
        <view class="video_btn share_btn" bindtap="openShare" data-author="{{item.nickName}}" data-index="{{index}}" data-id="{{item.id}}" data-avatar="{{item.avatar}}" data-uid="{{item.uid}}" data-img="{{item.img}}" data-title="{{item.title}}" data-shareimg="{{item.shareImg}}" data-grade="{{item.grade}}" data-type="{{item.type}}">
          <image class="share_btn_icon" src="../../static/index/share.png" />
          <text>{{item.shareAmount === 0 ? '分享' : item.shareAmount}}</text>
        </view>
        <!-- <button class="video_btn share_btn" open-type="share" bindtap="openShare" data-author="{{item.nickName}}" data-index="{{index}}" data-id="{{item.id}}" data-avatar="{{item.avatar}}" data-uid="{{item.uid}}" data-img="{{item.img}}" data-title="{{item.title}}" data-shareimg="{{item.shareImg}}" data-grade="{{item.grade}}" data-type="{{item.type}}">
   <image class="share_btn_icon" src="../../static/index/share.png"></image>
   <text>分享</text>
 </button> -->
      </view>
      <view class="foot_right">
        <view class="video_btn flower_btn" catchtap="{{item.isLike ?  null : 'likeTap'}}" data-index="{{index}}" data-id="{{item.id}}" data-islike="{{item.isLike}}">
          <view class="animation-flower {{addComeOut === index ? 'add-one-come-out' : ''}}">
            <image class="animation-flower-icon" src="../../static/image/flower_small.png" />
            <text>+1</text>
          </view>
          <image class="flower_btn_icon" src="{{item.isLike ? '../../static/index/heart_colored.png' : '../../static/index/heart.png'}}" />
          <text>{{item.likes === 0 ? '点赞' : item.likes}}</text>
        </view>
        <view class="video_btn comment_btn" catchtap="openComment" data-id="{{item.id}}" data-index="{{index}}">
          <image class="comment_btn_icon" src="../../static/index/comment.png" lazy-load="true" />
          <text>{{item.commentAmount === 0 ?'评论' : item.commentAmount}}</text>
        </view>
      </view>
    </view>
    <view class="btn_wrapper" wx:if="{{!item.noReading && !item.ifCheck}}" catchtap="goToReading" data-id="{{item.classId}}">
      <view class="reading_btn">
        <image src="../../static/index/microphone.png" />
        <text>我要配音</text>
      </view>
    </view>
  </view>
  <view class="no_work" wx:if="{{!isSwiper && noMoreWork}}">
    <text class="no_work_text">已经到底啦！</text>
  </view>
</view>
<flowerBox id="flower-toast" flowerNum="{{flowerNum}}" />
<shareDialog id="share-dialog" shareType='works' bindShareDialogClose="shareDialogClose" bindaddShareAmount="addShareAmount" shareId="{{id}}" />