<!-- 针对mov视频的视频处理 -->
|
<template>
|
<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` }"
|
class="w-full w-full"
|
:poster="property.posterUrl"
|
:autoplay="property.autoplay"
|
:src="VideoUrl"
|
controls
|
ref="videoRef"
|
></video>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import { VideoPlayerProperty } from './config'
|
|
import { MoveToMp4 } from '@/utils/MovToMp4'
|
|
const videoRef = ref()
|
|
const isLoading = ref(true)
|
|
// 当前视频的视频地址
|
const VideoUrl = ref("")
|
|
/** 视频播放 */
|
defineOptions({ name: 'VideoPlayer' })
|
|
const Url = defineProps<{ property: VideoPlayerProperty }>()
|
|
// 视频文件地址处理
|
|
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>
|
|
<style scoped lang="scss">
|
/* 图片 */
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
