du
2025-04-01 4b80e89973960907915dedddbd73fd2dd4578261
easegen-front/src/components/DiyEditor/components/mobile/VideoPlayer_mov/index.vue
@@ -1,46 +1,52 @@
<!-- 针对mov视频的视频处理 -->
<template>
  <div class="w-full" :style="{ height: `${property.style.height}px` }">
    <el-image class="w-full w-full" :src="property.posterUrl" v-if="property.posterUrl" />
  <div class="w-full" :style="{ height: `${property.style.height}px` }" v-loading="VideoUrl===''" >
    <!-- :src="TakeUrl('/public/mov/processed_video.mov')" -->
    <video
      :style="{ height: `${property.style.height}px` }"
      v-else
      class="w-full w-full"
      :src=" TakeUrl(property.videoUrl) "
      :poster="property.posterUrl"
      :autoplay="property.autoplay"
      :src="VideoUrl"
      controls
      ref="videoRef"
    ></video>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, onMounted } from 'vue'
import { VideoPlayerProperty } from './config'
import { MoveToMp4 } from "@/utils/MovToMp4"
import { MoveToMp4 } from '@/utils/MovToMp4'
const videoRef = ref()
const isLoading = ref(true)
// 当前视频的视频地址
const VideoUrl = ref("")
/** 视频播放 */
defineOptions({ name: 'VideoPlayer' })
defineProps<{ property: VideoPlayerProperty }>()
const Url = defineProps<{ property: VideoPlayerProperty }>()
// 视频文件地址处理
const TakeUrl = async (url:string) => {
  let fileType = String( url.slice( url.lastIndexOf(".")+1 ) )
  if( fileType === 'mov' ){
    let file = await MoveToMp4( url )
    videoRef.value.src = file
  }else{
    videoRef.value.src = url
  }
const TakeUrl = async () => {
    const url = Url.property.videoUrl
    let fileType = String(url.slice(url.lastIndexOf('.') + 1))
    if (fileType === 'mov') {
      let file = await MoveToMp4(url)
        VideoUrl.value = file
    } else {
        VideoUrl.value = url
    }
}
onMounted( ()=>{
  TakeUrl()
} )
</script>