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 ) ) const TakeUrl = async () => { const url = Url.property.videoUrl let fileType = String(url.slice(url.lastIndexOf('.') + 1)) if( fileType === 'mov' ){ let file = await MoveToMp4( url ) videoRef.value.src = file VideoUrl.value = file }else{ videoRef.value.src = url VideoUrl.value = url } } } onMounted( ()=>{ TakeUrl() } ) </script>
@@ -19,7 +19,15 @@ <el-form-item v-if="formData.useModel == 2 || formData.useModel == 3" :label="t('digitalhumans.video')" prop="videoUrl"> <UploadFile v-if="!(formData.videoUrl || formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4']" :limit="1" @on-success="handleFileSuccess('fixVideoUrl', $event)"/> <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> <!-- 播放mov视频 --> <!-- 下面的是原本的 --> <!-- <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> --> <!-- 下面的是针对mov新加的 --> <VideoPlayerMov v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> </el-form-item> <el-form-item :label="t('digitalhumans.type')" prop="type"> <el-select disabled v-model="formData.type" :placeholder="t('common.selectText') + t('digitalhumans.type')"> easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue
@@ -54,7 +54,10 @@ 当前正在处理并上传中，请耐心等待... </div> </div> --> <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> <!-- 原视频播放器 --> <!-- <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> --> <!-- 新的视频播放器 --> <VideoPlayerMov v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> </el-form-item> <!-- <el-form-item :label="抠图标识" prop="matting"> <el-select v-model="formData.matting" :placeholder="请选择抠图标识"> @@ -97,6 +100,7 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' import * as DigitalHumansApi from '@/api/digitalcourse/digitalhumans' import VideoPlayer from "@/components/DiyEditor/components/mobile/VideoPlayer/index.vue"; import VideoPlayerMov from "@/components/DiyEditor/components/mobile/VideoPlayer_mov/index.vue"; import {DiyComponent} from "@/components/DiyEditor/util"; import {VideoPlayerProperty} from "@/components/DiyEditor/components/mobile/VideoPlayer/config"; import { useUpload } from '@/components/UploadFile/src/useUpload'
