igg4-miniprogram/src/pages/repositoryVideoDetail/index.wxml

<navbar fixed custom-style="background:{{background}};color:#fff">
  <van-icon name="arrow-left" slot="left" size="18px" color="#fff" bind:tap="handleBack" />
  <view slot="title" style="color: #fff">视频</view>
</navbar>
<view class="page">
  <swiper class="swiper" vertical="{{true}}" current="{{current}}" bindchange="handleChange">
    <swiper-item class="swiper-item" wx:for="{{videoList}}" wx:key="Id">
      <video
        id="video-{{item.Id}}"
        class="video"
        src="{{item.SrcUrl}}"
        poster="{{item.ImageUrl}}"
        loop
        object-fit="contain"
        enable-play-gesture
        enable-progress-gesture
        show-center-play-btn="{{false}}"
        play-btn-position="center"
        controls="{{false}}"
        bindprogress="handleProgress"
        bindplay="handlePlay"
        bindpause="handlePause"
        bindtimeupdate="handleTimeUpdate"
        data-index="{{index}}"
        bind:tap="handleTogglePlay"
      ></video>
      <image
        wx:if="{{!item.play}}"
        class="play"
        src="{{imageUrl}}1/video-play.png?t={{Timestamp}}"
        catch:tap="handleTogglePlay"
        data-index="{{index}}"
      ></image>
      <view class="swiper-item-footer">
        <view class="title">{{item.Title}}</view>
        <view class="progress">
          <van-slider
            value="{{item.progress}}"
            active-color="#fff"
            bar-height="4"
            inactive-color="rgba(255, 255, 255, 0.29)"
            bind:drag-start="handleDragStart"
            bind:change="handleDragEnd"
            use-button-slot
            data-index="{{index}}"
          >
            <view class="slider-btn" slot="button"></view>
          </van-slider>
        </view>
        <view class="container">
          <view class="user">
            <image class="avatar" src="{{imageUrl}}5/logo1.png?t={{Timestamp}}"></image>
            <view class="name">gMG给力加油站</view>
          </view>
          <view class="options">
            <view class="o-item">
              <image class="icon" src="{{imageUrl}}1/view.png?t={{Timestamp}}"></image>
              <block wx:if="{{~~item.OpenNum + ~~item.BasicNum}}">{{~~item.OpenNum + ~~item.BasicNum}}</block>
            </view>

            <view
              class="o-item {{item.IsCompliment==1 && 'active'}}"
              catch:tap="handleVideoStar"
              data-id="{{item.Id}}"
              data-index="{{index}}"
            >
              <image
                class="icon"
                wx:if="{{item.IsCompliment==1}}"
                src="{{imageUrl}}1/star-active.png?t={{Timestamp}}"
              ></image>
              <image class="icon" wx:else src="{{imageUrl}}1/star.png?t={{Timestamp}}"></image>
              <block wx:if="{{~~item.ComplimentNum}}">{{item.ComplimentNum}}</block>
            </view>
            <view
              class="o-item {{item.IsCollect == 1 && 'active'}}"
              catch:tap="handleVideoToggleSave"
              data-id="{{item.Id}}"
              data-collect="{{item.IsCollect}}"
              data-index="{{index}}"
            >
              <image
                class="icon"
                wx:if="{{item.IsCollect == 1}}"
                src="{{imageUrl}}1/save-active-plan.png?t={{Timestamp}}"
              ></image>
              <image class="icon" wx:else src="{{imageUrl}}1/save.png?t={{Timestamp}}"></image>
              <block wx:if="{{~~item.CollectionPeopleNum}}">{{item.CollectionPeopleNum}}</block>
            </view>
            <button
              class="o-item share"
              open-type="share"
              data-id="{{item.Id}}"
              data-type="video"
              data-index="{{index}}"
              catch:tap="handleShare"
            >
              <image class="icon" src="{{imageUrl}}1/share.png?t={{Timestamp}}"></image>
              <block wx:if="{{~~item.ShareNum}}">{{item.ShareNum}}</block>
            </button>
          </view>
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>

<star id="animate" class="animate {{starShow&&'active'}}"></star>