youxi-app/pages/programming/detail.uvue

<script setup lang='ts'>
import Back from '@/components/back.uvue'
import Loading from '@/components/loading.uvue'
import { ref, onMounted, watchEffect, nextTick, onUnmounted } from 'vue'
import { type SubjectCourseResult, fetchSubjectCourseApp, updateSubjectProgress } from '@/services/subject/course'
import { router } from '@/.cool'
const isLoading = ref(true)
const showProgress = ref(true)
const showControls = ref(true)
const showVideo = ref(true)

const data = ref({
  videoSrc: '',
})
//当前进度

const course = ref<SubjectCourseResult>()
//通过路由参数获取课程id
async function fetchCatalog() {
  course.value = await fetchSubjectCourseApp({ id: router.query().id })
  if (!course.value?.videoPath) {
    return
  }

  data.value.videoSrc = course.value?.videoPath.includes('http') ? encodeURI(course.value?.videoPath) : ('https://oss.xiaoxiongcode.com' + encodeURI(course.value?.videoPath))
}
onMounted(async () => {
  await fetchCatalog()
  isLoading.value = false
  setTimeout(() => {
    isLoading.value = false
  }, 1000)
})
async function handleEnded() {
  router.back()
}

function handleControlsToggle(e) {
  showControls.value = e.detail.show
}



</script>
<template>
  <Loading v-show="isLoading" />
  <cl-page v-show="!isLoading">
    <view class="w-full h-full">
      <video id="video1" class="w-full h-full " :src="data.videoSrc" :show-center-play-btn="false"
        :show-background-playback-button="false" :show-fullscreen-btn="false" :show-casting-button="false" autoplay
        @controlstoggle="handleControlsToggle" @ended="handleEnded">
      </video>
      <view class="video-fullscreen_title" v-show="showControls">
        <Back />
        <view class="text-[20px] font-bold text-white">
          {{ course?.mainTitle }}
        </view>
      </view>
    </view>
  </cl-page>
</template>
<style lang="scss" scoped>
.translate50 {
  transform: translateY(-50%);
}

.course-detail-page {
  @apply flex flex-row items-center;
  background-color: #3498DB;
  height: 100vh;
  color: black;
  transition: all 1s ease-in-out;

}

.video-container {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  animation: spin 2s linear 1;
  transition: all 2s ease-in-out;
}

@keyframes spin {
  0% {
    opacity: 50%;
  }

  100% {
    opacity: 1;
  }
}

.hidden {
  opacity: 0;
  transition: all 3s ease-in-out;
}

.video-fullscreen_title {
  @apply absolute top-3 left-0 pl-[80px] w-[100vw] z-10 flex items-center justify-between flex-row;
  color: #fff;

  .control-progress {
    @apply flex flex-row gap-[3px] relative justify-end;
    flex: 1;

    .before {
      @apply absolute top-1/2 right-0 w-[340px] h-[40px] bg-[#2BA0F3] rounded-l-full;
      transform: translateY(-30%);
    }
  }
}

video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-enter-fullscreen-button,
video::-webkit-media-controls-rotate-button,
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button {
  display: none !important;
}

.mic {
  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}
</style>