<!-- 针对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" />
|
<!-- :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"
|
controls
|
ref="videoRef"
|
></video>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref } from "vue";
|
import { VideoPlayerProperty } from './config'
|
|
import { MoveToMp4 } from "@/utils/MovToMp4"
|
|
const videoRef = ref()
|
|
/** 视频播放 */
|
defineOptions({ name: 'VideoPlayer' })
|
|
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
|
}
|
|
}
|
|
|
</script>
|
|
<style scoped lang="scss">
|
/* 图片 */
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
