ruo-shan-cloud-pharmacy/miniprogram/package-live/volc-mini-sdk/components/player/player.wxml

<!-- volc-mini-sdk/components/player.wxml -->
<view
  class="volc-video-container {{isPortrait ? 'room-portrait' : 'room-landscape'}}"
  id="volc-video-container"
>
  <view class="volc-video-status {{statusBannerCentered ? 'volc-video-status-centered' : ''}}" wx:if="{{showStatusBanner}}">
    {{statusBannerText}}
  </view>
  <view wx:if="{{!isPortrait && (showPeopleCount || showStatusTag)}}" class="volc-video-left-top-row">
    <people-counter
      wx:if="{{showPeopleCount}}"
      mode="landscape"
      sdkInstance="{{sdkInstance}}"
    />
    <view class="volc-video-status-tag" wx:if="{{showStatusTag}}">
      <view class="volc-video-status-tag-icon">
        <view class="volc-video-status-tag-icon-bar volc-video-status-tag-icon-bar-1"></view>
        <view class="volc-video-status-tag-icon-bar volc-video-status-tag-icon-bar-2"></view>
        <view class="volc-video-status-tag-icon-bar volc-video-status-tag-icon-bar-3"></view>
      </view>
      <view>{{statusTagText}}</view>
    </view>
  </view>
  <image
    wx:if="{{videoType == 'poster'}}"
    mode="cover"
    src="{{CoverImageUrl}}"
    class="video-item"
  />
  <view wx:if="{{!isPortrait && !isFullscreen && videoType == 'poster'}}" class="player-top-actions">
    <slot name="topRight"></slot>
  </view>
  <volc-loading wx:if="{{isLoading}}" zIndex="{{3}}" theme="dark" type="player" />
  <view wx:if="{{playErrorVisible}}" class="play-error-mask">
    <view class="play-error-content">
      <view class="play-error-text">{{playErrorText}}</view>
      <button
        wx:if="{{videoType === 'live'}}"
        class="weui-btn weui-btn_default play-error-retry-btn"
        bindtap="handleRetryPull"
      >
        重试
      </button>
    </view>
  </view>
  <view wx:if="{{videoType == 'live' || videoType == 'vod'}}" style="{{videoStyle}}" class="videoContainer">
    <video wx:if="{{videoType == 'vod' && shouldRenderVodPlayer}}" id="volcVodPlayer" src="{{vodSrc}}" class="video-item"
      initial-time="{{vodInitialTime}}"
      show-fullscreen-btn="{{!isPortrait || !isVideoPortrait}}"
      enable-play-gesture="{{videoAttrs['enable-play-gesture']}}"
      enable-progress-gesture="{{videoAttrs['enable-progress-gesture']}}"
      loop="{{trailerLoop}}"
      show-center-play-btn="{{videoAttrs['show-center-play-btn']}}"
      show-play-btn="{{videoAttrs['show-play-btn']}}"
      show-progress="{{videoAttrs['show-progress']}}"
      controls="{{videoAttrs['controls']}}"
      show-background-playback-button="{{false}}"
      object-fit="{{videoAttrs['object-fit']}}"
      autoplay="{{videoAttrs['autoplay'] && vodAutoplay}}"
      picture-in-picture-mode="{{videoAttrs['picture-in-picture-mode']}}"
      bindplay="handelPlay"
      bindpause="handelPause"
      bindended="bindVodEnded"
      binderror="videoErrorCallback"
      bindtimeupdate="handleVodTimeUpdate"
      bindfullscreenchange="bindFullscreenChange"
      bindwaiting="handleWaiting"
      bindprogress="handleProgress"
      bindloadedmetadata="handleLoadedMetaData"
      bindcontrolstoggle="handleControlDisplay"
      bindenterpictureinpicture="handleEnterPictureInPicture"
      bindleavepictureinpicture="handleLeavePictureInPicture"
      bindseekcomplete="handleSeekComplete"
    >
      <image
        wx:if="{{isShowReplayBtn && CoverImageUrl}}"
        mode="aspectFill"
        src="{{CoverImageUrl}}"
        class="video-item vod-poster-layer"
      />
      <view wx:if="{{isShowReplayBtn}}" class="replay-mask">
        <view bindtap="handleClickReplay" class="replay-btn">
          <image src="./assets/replay.svg" class="replay-icon" />
          <view class="replay-text">重播</view>
        </view>
      </view>
      <!-- 由于全屏播放时，抽屉展示不出来，使用 cover-view 会导致元素放大，无法正常使用，暂时在全屏时引擎，后续统一优化交互 -->
      <view wx:if="{{!isPortrait && !isFullscreen && videoControlsVisible}}" class="player-top-actions">
        <slot name="topRight"></slot>
      </view>
    </video>
    <volc-live-player wx:if="{{videoType == 'live' && shouldRenderLivePlayer}}" id="volcLivePlayer" class="video-item"
        engine="{{liveEngine}}"
        src="{{liveSrc}}"
        object-fit="{{livePlayerAttrs['object-fit']}}"
        picture-in-picture-mode="{{livePlayerAttrs['picture-in-picture-mode']}}"
        min-cache="{{livePlayerAttrs['min-cache']}}"
        max-cache="{{livePlayerAttrs['max-cache']}}"
        success-code="{{liveSuccessCode}}"
        show-controls="{{!isPortrait}}"
        show-play-control="{{(!isPortrait || !isVideoPortrait) && !(isDesktopPlatform && liveEngine !== 'video')}}"
        show-fullscreen-control="{{!isPortrait || !isVideoPortrait}}"
        bindplay="handelPlay" 
        bindpause="handelPause" 
        bindfirstframe="liveFirstFrame"
        bindwaiting="liveWaiting"
        bindwaitingend="liveWaitingEnd"
        bindloadedmetadata="liveLoadedMetaData"
        bindretry="liveRetry"
        bindtimeupdate="liveTimeUpdate"
        bindended="liveEnded"
        binderror="liveErrorCallback" 
        bindstatechange="liveStateChange"
        bindfullscreenchange="bindFullscreenChange"
        bindnetstatus="liveNetStatus"
        bindenterpictureinpicture="handleEnterPictureInPicture"
        bindleavepictureinpicture="handleLeavePictureInPicture"
      >
      <!-- 由于全屏播放时，抽屉展示不出来，使用 cover-view 会导致元素放大，无法正常使用，暂时在全屏时引擎，后续统一优化交互 -->
        <view wx:if="{{!isPortrait && !isFullscreen}}" slot="topRight" class="player-live-top-actions">
          <slot name="topRight"></slot>
        </view>
    </volc-live-player>
  </view>
  <Drawer id='volc-backRate-drawer'>
    <dialog-content bindvalueChange="valueChange" type="backRate" list="{{backRateList}}" selected="{{playRate}}" />
  </Drawer>
  <Drawer id='volc-clarity-drawer'>
    <dialog-content bindvalueChange="valueChange" type="clarity" list="{{videoType === 'live' ? liveAllowedSize : vodAllowedSize}}" selected="{{videoType === 'live' ? liveSelectedSize : vodSelectedSize }}" />
  </Drawer>
</view>