<template>
  <view class="video-container">
    <!-- 视频播放器 -->
    <up-navbar :autoBack="true" bgColor="transparent" leftIconColor="#fff"> </up-navbar>

    <video
      id="myVideo"
      :src="videoUrl"
      controls
      autoplay
      muted
      object-fit="contain"
      class="video-player"
      @error="videoErrorCallback"
    >
    </video>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';

  import { ref } from 'vue';
  const videoUrl = ref('');
  onLoad((options) => {
    videoUrl.value = options.url;
  });
  // 视频错误回调
  const videoErrorCallback = (e) => {
    console.error('视频播放错误:', e.detail);
    uni.showToast({
      title: '视频加载失败',
      icon: 'none',
    });
  };
</script>

<style lang="scss">
  .video-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
  }

  .video-player {
    width: 100vw;
    height: 50vh;
  }

  .video-tips {
    padding: 20rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>