Traffic-widget/miniprogram/pages/video/video.wxml

<!--miniprogram/pages/video/video.wxml-->
<view class="videobg">
  <view class="videoGroup">
    <view class="widthClient">
      <video id="myVideo" data-i="{{urlOne.i}}" class="widthClient" style="{{playerCom ? 'opacity: 1' : 'opacity: 0'}};position: absolute"
        bindended="videoEnd" bindwaiting="bindwaiting" bindprogress="bindprogress1" bindplay="bindplay"
        src="{{urlOne.url}}" binderror="videoErrorCallback" show-center-play-btn='{{false}}' controls="{{false}}"
        muted="{{muted}}" initial-time="{{0.01}}" bindtimeupdate="upProgress"
        enable-progress-gesture="{{false}}"></video>
    </view>
    <view class="widthClient">
      <video id="myVideo2" data-i="{{urlTwo.i}}" class="widthClient"
        style="{{!playerCom ? 'opacity: 1' : 'opacity: 0'}}" bindended="videoEnd" bindwaiting="bindwaiting"
        bindprogress="bindprogress2" bindplay="bindplay" src="{{urlTwo.url}}" show-center-play-btn='{{false}}'
        controls="{{false}}" muted="{{muted}}" initial-time="{{0.01}}" bindtimeupdate="upProgress"
        enable-progress-gesture="{{false}}"></video>
    </view>
  </view>
  <view class="widthClient">
    <view class="fun">
      <text>{{durationFormat}}/{{ allDurationFormat }}</text>
      <view class="item-button" bindtap="backStep">
        <image style="width: 18px; height: 18px; background-color: #181818;" wx:if="{{stepIndex > 0}}"
          mode="{{item.mode}}" src="../../resources/image/l.png">
        </image>
        <image style="width: 18px; height: 18px; background-color: #181818;" wx:if="{{stepIndex <= 0}}"
          mode="{{item.mode}}" src="../../resources/image/l2.png">
        </image>
      </view>
      <view class="item-button" bindtap="backNext">
        <image style="width: 18px; height: 18px; background-color: #181818;"
          wx:if="{{stepIndex < maxStepIndex && maxStepIndex >= 1}}" mode="{{item.mode}}"
          src="../../resources/image/r.png">
        </image>
        <image style="width: 18px; height: 18px; background-color: #181818;" wx:if="{{ maxStepIndex < 1}}"
          src="../../resources/image/r2.png">
        </image>
      </view>
      <view class="item-button">
        <mp-icon bindtap="play" wx:if="{{ !playStatus }}" icon="play" color="#fff" size="{{25}}"></mp-icon>
        <mp-icon bindtap="pause" wx:if="{{ playStatus }}" icon="pause" color="#fff" size="{{25}}"></mp-icon>
      </view>
    </view>
    <view id="progress">
      <!--  scroll-with-animation="{{!isScroll}}" -->
      <scroll-view class="scrollx" enhanced="{{true}}" bindtouchstart="acttouch" bindtouchend="endProgress"
        bindscroll="moveProgress" bindtouchend="endProgress" scroll-x scroll-left="{{progress}}">
        <view class="tarck" style="width: {{100 * imgFrame.length}}rpx">
          <view class="progressLong">
            <view wx:if="{{imgFrame.length}}">
              <image lazy-load style="width: 100rpx; height:55rpx" wx:for="{{imgFrame}}" src="{{item}}" wx:key="item">
              </image>
            </view>
            <view>
              <image style="width: 100%;height: 60px" wx:for="{{music}}" wx:key="id" wx:if="{{music.length}}"
                src="{{item.bo}}"></image>
            </view>
            <image style="width: 100%;height: 60px" wx:if="{{currentValue}}"
              src="https://main-bucket.bj.bcebos.com/miniprog-avres/voice/voice.aac.png"></image>
            <!-- <wave-form style="width: {{50 * imgFrame.length}}rpx" long="{{50 * imgFrame.length}}" wx:if="{{music.length}}"></wave-form> -->
            <!-- <wave-form style="width: {{50 * imgFrame.length}}rpx" long="{{50 * imgFrame.length}}" color="{{'#df8e2e'}}" wx:if="{{currentValue}}"></wave-form> -->
          </view>
        </view>
      </scroll-view>
      <view class="cursorProgress"></view>
    </view>
    <view class="selectBtn">
      <view class="weui-flex__item" style="text-align: center">
        <view class="weui-flex">
          <view class="weui-flex__item">
            <view class="item-button" bindtap="showMusic">
              <mp-icon icon="music" color="#fff" size="{{25}}"></mp-icon>
            </view>
          </view>
          <view class="weui-flex__item">
            <view class="item-button">
              <mp-icon bindtap="share" icon="share" color="#fff" size="{{25}}"></mp-icon>
            </view>
          </view>
          <view class="weui-flex__item">
            <view class="item-button" bindtap="showText">
              <mp-icon icon="text" color="#fff" size="{{25}}"></mp-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
<text-input show="{{active === 'text'}}" stepIndex="{{stepIndex}}" currentValue="{{currentValue}}" bindadd="handleText">
</text-input>
<music-list music="{{music}}" show="{{active === 'music'}}" bindchange="handleMusicChange"
  bindremove="handleMusicRemove"></music-list>
<!-- 遮罩 -->
<view wx:if="{{showBg}}" class="bag" bindtap="showBag"></view>