| | |
| | | <!-- 针对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> |
| | | |