wxamp-ymtxUser/pagesB/pages/spDetails/spDetails.wxml

<view class="video-detail-container">
  <!-- 导航栏 -->
  <view class="nav-bar" wx:if="{{!fullScreen}}">
    <view class="nav-title">{{video.title}}</view>
  </view>

  <!-- 视频播放器区域 -->
  <view class="video-player-section" style="{{fullScreen ? 'height: 100vh;' : ''}}">
    <!-- 视频播放器 -->
    <video 
      id="videoPlayer"
      src="{{videoUrl}}"
      poster="{{video.coverImage ? baseUrl + video.coverImage : ''}}"
      initial-time="0"
      autoplay="{{autoplay}}"
      loop="{{loop}}"
      muted="{{isMuted}}"
      controls="{{!fullScreen}}"
      show-fullscreen-btn="{{!fullScreen}}"
      show-play-btn="true"
      show-center-play-btn="true"
      enable-progress-gesture="true"
      enable-play-gesture="{{fullScreen}}"
      object-fit="contain"
      direction="0"
      bindplay="onVideoPlay"
      bindpause="onVideoPause"
      bindended="onVideoEnded"
      bindtimeupdate="onTimeUpdate"
      bindfullscreenchange="onFullScreenChange"
      bindloadedmetadata="onVideoLoaded"
      binderror="onVideoError"
      class="video-player"
    ></video>

    <!-- 视频封面 -->
    <view class="video-cover" wx:if="{{video.coverImage && !isPlaying && !fullScreen}}">
      <image 
        src="{{baseUrl + video.coverImage}}" 
        mode="aspectFill"
        class="cover-image"
      ></image>
      <view class="cover-play-btn" catchtap="togglePlay">
        <image class="play-icon" src="/pagesB/images/bo.png"></image>
      </view>
    </view>

    <!-- 全屏时的自定义控制栏 -->
    <view class="fullscreen-controls" wx:if="{{fullScreen}}" catchtouchmove="onTouchMove">
      <!-- 顶部控制栏 -->
      <view class="fullscreen-top-bar">
        <view class="top-bar-left" catchtap="exitFullScreen">
          <image class="back-icon" src="/pagesB/images/left.png"></image>
          <text class="back-text">返回</text>
        </view>
        <view class="top-bar-title">{{video.title}}</view>
        <view class="top-bar-right"></view>
      </view>

      <!-- 播放按钮（中间） -->
      <view class="center-play-btn" wx:if="{{!isPlaying}}" catchtap="togglePlay">
        <image class="play-large-icon" src="/pagesB/images/play.png"></image>
        <view class="play-ripple"></view>
      </view>

      <!-- 底部控制栏 -->
      <view class="fullscreen-bottom-bar">
        <!-- 进度条 -->
        <view class="fullscreen-progress">
          <view class="progress-time">{{formatTime(currentTime)}}</view>
          <view class="progress-slider-container">
            <view class="progress-bg">
              <view class="progress-current" style="width: {{duration ? (currentTime / duration * 100) + '%' : '0%'}}"></view>
            </view>
            <view 
              class="progress-thumb" 
              style="left: {{duration ? (currentTime / duration * 100) + '%' : '0%'}}"
            ></view>
          </view>
          <view class="progress-time">{{formatTime(duration)}}</view>
        </view>

        <view class="bottom-controls">
          <view class="control-item" catchtap="togglePlay">
            <image class="control-icon" src="{{isPlaying ? '/pagesB/images/pause.png' : '/pagesB/images/play.png'}}"></image>
          </view>
          <view class="control-item" catchtap="toggleMute">
            <image class="control-icon" src="{{isMuted ? '/pagesB/images/volume_mute.png' : '/pagesB/images/volume.png'}}"></image>
          </view>
          <view class="control-item" catchtap="toggleLoop">
            <image class="control-icon" src="{{loop ? '/pagesB/images/loop_on.png' : '/pagesB/images/loop.png'}}"></image>
          </view>
          <view class="control-item" catchtap="toggleSpeed">
            <text class="speed-text">{{playbackRate}}x</text>
          </view>
          <view class="control-item" catchtap="enterFullScreen">
            <image class="control-icon" src="/pagesB/images/fullscreen.png"></image>
          </view>
        </view>
      </view>

      <!-- 触摸控制区域 -->
      <view class="touch-control-left" catchtap="onTouchControl" data-type="backward"></view>
      <view class="touch-control-center" catchtap="togglePlay"></view>
      <view class="touch-control-right" catchtap="onTouchControl" data-type="forward"></view>
    </view>

    <!-- 非全屏播放按钮 -->
    <view class="normal-play-btn" wx:if="{{!fullScreen && !isPlaying && !video.coverImage}}" catchtap="togglePlay">
      <image class="play-icon" src="/pagesB/images/bo.png"></image>
    </view>
  </view>

  <!-- 视频信息区域 -->
  <scroll-view 
    class="video-info-section" 
    scroll-y 
    wx:if="{{!fullScreen}}"
    scroll-with-animation
  >
    <!-- 视频标题和描述 -->
    <view class="video-header">
      <view class="video-title">{{video.title}}</view>
      <view class="video-description">{{video.description}}</view>
      
      <!-- 视频统计数据 -->
      <view class="video-stats">
        <view class="stat-item">
          <text>{{video.viewCount}} 播放</text>
        </view>
        <view class="stat-item">
          <text>{{video.publishTime}}</text>
        </view>
        <view class="stat-item">
          <text>{{video.category}}</text>
        </view>
      </view>
    </view>

    <!-- 发布者信息 -->
    <view class="publisher-section" wx:if="{{video.publisherName}}">
      <image class="publisher-avatar" src="{{video.publisherAvatar ? baseUrl + video.publisherAvatar : '/pagesB/images/default_avatar.png'}}"></image>
      <view class="publisher-info">
        <view class="publisher-name">{{video.publisherName}}</view>
        <view class="publisher-desc">{{video.publisherDesc || '视频发布者'}}</view>
      </view>
    </view>

    <!-- 视频标签 -->
    <view class="tags-section" wx:if="{{videoTags.length > 0}}">
      <view class="section-title">标签</view>
      <view class="tags-container">
        <view class="tag-item" wx:for="{{videoTags}}" wx:key="index">
          {{item}}
        </view>
      </view>
    </view>
  </scroll-view>

  <!-- 加载中 -->
  <view class="loading-container" wx:if="{{loading}}">
    <view class="loading-spinner">
      <view class="spinner-circle"></view>
    </view>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 错误提示 -->
  <view class="error-container" wx:if="{{videoError}}">
    <image class="error-icon" src="/pagesB/images/error.png"></image>
    <text class="error-text">视频加载失败</text>
    <view class="retry-btn" catchtap="retryVideo">重试</view>
  </view>
</view>