mini_read_space_front/pages/video/detail.wxml

<!--pages/video/detail.wxml-->
<view class="container">
  <view class="nav-container">
    <view class="nav-back" bindtap="goBack">
      <image class="icon-back" src="/assets/images/icons/icon-back-black.png"></image>
    </view>
    <text class="video-title">{{videoInfo.title || title}}</text>
  </view>

  <scroll-view scroll-y="{{true}}" class="video-container" bindscroll="onScroll">
    <view class="video-main" style="height: 500rpx;">
      <block wx:if="{{videoDetail.video_type !== 4}}">
        <video autoplay="{{true}}" src="{{videoDetail.playUrl}}" direction="{{0}}" poster="{{videoDetail.cover_image}}"
          bindplay="onVideoPlay" bindpause="onVideoPause" bindended="onVideoEnd" class="my-video" id="my-video"
          style="height: 100%" bindtimeupdate="onVideoUpdate" bindseekcomplete="onVideoSeek"
          bindloadedmetadata="onVideoLoaded" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait">
          <view wx:if="{{isShowComplainBtn}}" class="complaint-btn" catchtap="handleComplain">投诉</view>
          <!-- 激励使用设置的首帧图 -->
          <image wx:if="{{videoDetail.first_image && videoDetail.lock}}" class="poster" src="{{videoDetail.first_image}}">
          </image>
          <view catchtap="handleClickRewardMask" class="reward-mask" wx:if="{{videoDetail.lock}}">
            <view class="reward-text">观看激励视频解锁更多精彩</view>
            <view class="play-btn">免费观看</view>
          </view>
        </video>
      </block>
      
      <!-- 加载中提示 -->
      <view wx:if="{{isLoading || !videoDetail.playUrl}}" class="loading-container">
        <view class="loading-spinner"></view>
        <view class="loading-text">{{isLoading ? '加载中...' : '获取视频中...'}}</view>
      </view>
    </view>
    
    <view class="bottom-container" wx:if="{{!isLoading && videoDetail}}">

      <!-- 分享 -->
      <view class="middle-share-container">
        <view class="middle-share-btn middle-share-btn-green" data-type="right">
          <image class="icon-wechat" src="/assets/images/icons/icon-wechat.png"></image>
          <text>转发好友</text>
          <button class="cover-button" open-type="share" data-type="video-friend"></button>
        </view>
        <view class="middle-share-btn middle-share-btn-orange" data-type="left">
          <image class="icon-wechat" src="/assets/images/icons/icon-wechat.png"></image>
          <text>分享群里</text>
          <button class="cover-button" open-type="share" data-type="video-group"></button>
        </view>
      </view>
      
      <!-- 标题 -->
      <view class="title-wrap">
        <view class="title">{{videoInfo.title}}</view>
      </view>
      
      
      <!-- <view class="home-btn" bindtap="goBack">返回视频列表</view> -->
    </view>

    <!-- 相关推荐 -->
    <view class="recommend-section" wx:if="{{!isLoading && relatedVideos && relatedVideos.length > 0}}">
      <view class="recommend-title">-更多精彩推荐-</view>
      <view class="video-list">

        <block wx:for="{{ relatedVideos }}" wx:key="id">
          <!-- 视频卡片 -->
          <view class="video-item" bindtap="onRelatedVideoTap" data-id="{{ item.id }}">
            <view class="video-cover-container">
              <image
                class="video-cover"
                src="{{ item.cover_image }}"
                mode="aspectFill"
              />
              <view class="play-button-container">
                <view class="play-button" wx:if="{{ !item.lock }}">
                  <image
                    class="play-icon"
                    src="/assets/images/icon-video-play.png"
                  ></image>
                </view>

                <view class="play-button-lock" wx:else>
                  <image
                    class="play-icon"
                    src="/assets/images/icon-lock.png"
                  ></image>
                  <view class="play-button-lock-title">观看广告解锁完整内容</view>
                </view>
              </view>
            </view>
  
            <view class="video-item-title">{{ item.title }}</view>
            <view class="share-button" catchtap="onShareTap">
              <image
                class="share-icon"
                src="/assets/images/icons/icon-wechat.png"
                catchtap="onShareTap"
              ></image>
              <text>分享</text>
              <button class="share-cover-button" open-type="share" data-video="{{ item }}" catchtap></button>
            </view>
          </view>
        </block>
      </view>
    </view>
  </scroll-view>
</view>